HTML and CSS to create a one-page navigation view. This will be embedded within a mobile iOS app. The user can drag their finger to rotate the view. The UI should feel natural, like the user is directly dragging, but non-linear so that fast swipes spin faster. Drag speed depends on the height on screen.
Design for 10 panels. I will provide:
Fonts: The script, and the slab serif
Icons can be implemented via a custom font: Stars, finger, star, gift, wand, blossom, clock, house, gear, etc
Illustrations: the character faces
background image
Your code will be transparent, and will 100% match our design mockup. We will superimpose your HTML above our game content.
Responsive design should adapt to various phone dimensions. Landscape orientation only.
The buttons should make callbacks. i.e., the arrow button, the home and options.
Each chapter will have slightly different colors in the banner under the characters illustration.
The top segment view could have anywhere from 1-5 segments, and any value of progress 0..1. In the sample, there are 3 segments, and approx 0.4 (40%) progress.
The middle panel should animation to display some text.
This should be compatible with iPhone and iPad. i.e. mobile Safari.
All text will be set via an optional JS array of strings.
Line art (vectors) should be implemented using SVG.
All SVG should be embedded within the HTML as data strings. i.e except for the illustrations, the file should be self-contained.
Simple proof of concept video:
https://youtu.be/oVitynj87lw
You can implement with addEventListener touchmove, pageX, etc. And CSS style.transform = rotate
Implement using optimized methods, e.g. GPU-accelerated CSS transforms. This should be smooth on 4-year old phones.
Work should be delivered in phases:
1) Drag/touch Motion, with wireframes
2) Make the status/progress bar
3) Make the banner bar (the arc, e.g. "CHAPTER 2")
4) Make Single panel, including story display
5) All panels, including a locked mode
6) Complete and finalize.
Work should be ongoing, I expect progress every 1-2 days.
