This creative scrolling panel example lets you explore the deep blue sea all on a single slide.
Published 5 years ago
Version 1.0
Blog Post
- Hi Everyone. Thank you for your interest in this project!
UPDATE - This project template is now available to download for free from my company website: https://discoverelearninguk.com/store/
You will also find a full write up on the technique used to create this interactive infographic effect here: https://discoverelearninguk.com/track-scrolling-panel-position-using-javascript-in-articulate-storyline/
Chris - Wow, this is fantastic! I love this concept too. It's a great way of telling a story, seamless.
- Hi Chris, awesome Storyline. Absolutely love it!
I've been trying get an image animation running when the user scrolls down, just like you did with your animated deep-sea creatures. I've used Hidden/Normal states to let the images appear, however, I can't seem to find out what "when" is needed for the trigger.
The perfect 'when' would be when the scroll bar is at a certain point, or when the image is showing up on the slide so the animation starts playing. Both of these options aren't available, so I was wondering what trigger setup you used. I'd love to apply a similar user experience like your Storyline project:
- when the user scrolls down, the image/text appears
- when the user scrolls all the way back up, and scrolls down again, the Storyline starts replaying the project just like the first time the user scrolls down (image/text appears at a certain point).
I'd love to hear how you applied this effect.- Hi Merel,
What you have described is absolutely possible with some JavaScript coding and a bit of setup in the slide.
The good news is that I have published the project template to my website to download for free, you will find the link for that above.
Also this blog post acts as an accompaniment to the project - https://discoverelearninguk.com/track-scrolling-panel-position-using-javascript-in-articulate-storyline/
This should provide everything you need to make your idea come to life.
All the best,
Chris
- Awesome project and thank you for sharing the file. Will it still work if it's published to Review 360 and loaded into Rise?
- This looks amazing. Well done. Are you willing to share how you accomplished this?
- I agree with Michelle - amazing work, Chris!
I'd love to see how you set this up. Would you be willing to share the basics of your .story-file? Or maybe write a short how-to article?- Same, I'd like to see the workings.
- I love this! So fresh and informative. Would love to see a tutorial on this!
- So cool and I learned a lot too!
- Fantastic! Would also love to have a storyline file for this or a tutorial.
- Very nice. Joining the ever-increasing choir asking for details into how you did this.
- Same! Is there a template file somewhere you could email? I'd love to incorporate something like this into Rise.
