I'm looking to understand if persistent symbols can be used to act as a pagination indicator.
Here is an example of image slider pagination in the Bootstrap framework:
(bottom centre of the screenshot)
And here's a live example using the Google Web Stories framework
Pagination is useful as it lets people know how long or short a story is. I'm looking to create a "tappable web story" where you tap right to move forward one screen, and tap left to go back.
Navigating back and forth can be handled inside Hype, but how can I set up the pagination element so it shows:
- 100% opacity on the "active" scene bullet
- 50% opacity on all the "inactive" scenes bullets
- and follows this pattern as the user navigates through the story
Assume that all scenes in a project will be viewed in a linear fashion, so users would navigate from Scene 1 - Scene 10, or back from Scene 10 to Scene 1.
This template is a start…
It does the navigating. Obviously, it's the navigation template.
Thanks so much for this example @h_classen ! Just what I was looking for.
It's very easy to understand, and by playing around with the symbol in the editor, I think I can use it for my purpose. Since I am focusing on short stories (15 scenes max), I can set up the pagination manually.
This is great! I actually have the Hype book you created, and keep telling myself I need to read the JS chapter carefully.