parallax scrolling for e-learning?

Seems like the latest trend is parallax scrolling websites and some are using this method to tell it's viewers a story with great results.

http://nasaprospect.com/

http://neomam.com/interactive/13reasons/

http://poppyspend.britishlegion.org.uk/

Has anyone had any experience with using this method for e-learning and any ideas on how it could be implemented?

 

Cheers

 

18 Replies
Nicole Legault

Great topic Tristan and one I don't think I've seen come up in the forums lately. Thanks for bringing it up!

I was actually recently playing around with the idea of parallax scrolling in Storyline, and I found I was able to achieve it by setting my Story size (on the Design tab on the ribbon) to be extra high. Then, when you publish and view your content in the web browser the scroll bar will automatically be there. However, keep in mind that the story size you set is the size for every slide in the course.

Here's the published output of the parallax scrolling file I created in Storyline. Hope this helps a bit. 

Adam Tompkins

Although Storyline will limit the slide size, making it challenging to have a true continuous vertical area to experience a scrolling parallax (with objects or elements appearing to move over background objects), you may be able to mimic a parallax effect by inserting animated element(s) into each individual slide (for example a simple Flash animation that shows some sort of movement like falling snowflakes, or even using a motion path in each slide that is triggered when the timeline starts, then moving once more when a trigger is used).

With your animated elements set in each slide, your linked slides will give the appearance of the animated object(s) or action traveling throughout the course. 

You won't be able to scroll fluidly from one section to another, but if you imagine your course or scenario as a vertical experience that moves the learner in a downward motion from one piece of information to another and use a clever graphical element that the learner can interact with to start the next animation, you should be able to create a memorable experience the makes a nice parallax-like hybrid.

Nicole Legault

Hi Tristan - In Storyline, click on the "Design" tab on the ribbon at the top of the application. All the way to the left you'll see a "Story Size" icon. Click on this, and from there you can adjust the height and width of your e-learning project. Hope this helps. Let me know if you have more questions. :) 

Steve Flowers

You could do something like this using sliders. Here's a quick and sloppy example that sets up the parallax all wrong:) These use an image in place of the slider thumb. The mountain uses a reversed start and finish value to make it go the opposite way. All three sliders are tied to the same variable. 

By turning your graphic on its side and setting your slider to vertical, you could provide a sense of background movement. By showing and hiding elements on the stage when the slider variable is within a range you could make it look like that they are appearing as the scroll progresses.

http://www.xpconcept.com/parallax1/story.html

The downside that I wasn't able to replicate in Storyline is the constant scroll. This requires activation with a mouse down event. Might be able to do something through JavaScript since the slider reacts to a changed variable. May give that a play later.

 

Chris Hodgson

Following on from this discussion, and taking inspiration from the excellent work done by Jerson Campos, I have created a self-updating mouse based parallax template within Storyline 2 using sliders.

If anyone in the future reads this thread looking for a way to achieve this effect, you can download the template from my website here to quickly get started: https://www.discoverelearninguk.com/product-category/articulate-storyline-templates/ 

Teresa Vanderpost

I was just reading an article online about parallax scrolling written by Phil Eagles - he has a really cool example done in Storyline - and the article was from 2016.  Not sure if he is still active on the community forum or not, but he may have some new ideas by now :) 

https://brayleinolearning.co.uk/blog/2016/august/12/taking-your-elearning-to-another-level-with-parallax-scrolling/