A parallax isn't really a parallax unless mouse scrolling is used. So while it is theoretically feasible using SL2, you will be hard-pressed to find a scenario where scrolling is used.
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.
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.
I think that would work nicely. I am not to worried about the whole parallax as such, more the idea of providing the information by scrolling down through one screen rather than moving through multiple screens.
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. :)
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.
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.
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.
An "Out of the box" option as my offering for vertical parallax scrolling - although technically it's clicking to get the scroll effect up and down and not scrolling using a scroll mouse: http://bit.ly/1I6oPUb Story file attached.
These are great examples! Is there a screenr video on how to do this? I'm struggling trying to figure out how to get the background slider to move. I'm using Motion Path but I don't think that's right.
I just took a look at Michelle's demo. Did you see trees in the background? If you did, try dragging the green box at least half way across the screen. The slider only has a few stops and they are a distance apart.
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 :)
18 Replies
A parallax isn't really a parallax unless mouse scrolling is used. So while it is theoretically feasible using SL2, you will be hard-pressed to find a scenario where scrolling is used.
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.
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.
Thanks Nicole that's exactly what I was thinking. I haven't played around with setting the screen size before where do I find these settings?
I think that would work nicely. I am not to worried about the whole parallax as such, more the idea of providing the information by scrolling down through one screen rather than moving through multiple screens.
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. :)
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.
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/
That's very cool Chris!
Very nice work - really well done, Chris!
Here is the sample that Chris is referring to.
https://visual-e-learning.com/Demos/GuruEntry/story.html
Click on the "Journey to a Comet" button.
An "Out of the box" option as my offering for vertical parallax scrolling - although technically it's clicking to get the scroll effect up and down and not scrolling using a scroll mouse: http://bit.ly/1I6oPUb
Story file attached.
These are great examples! Is there a screenr video on how to do this? I'm struggling trying to figure out how to get the background slider to move. I'm using Motion Path but I don't think that's right.
Hi Bruce and/or experts,
Can someone point out to me in the .story file how this scrolling effect is built or managed? Thanks!
Hi Colin,
My attempt can be found clicking on the link under my response above, titled: VerticalParallax.zip
Cheers
Hi, great scrolling sample. My browser (IE11) did not animate any elements to create the 'parallax' effect. Am I missing something?
Chrome Version 70.0.3538.102 (Official Build) (64-bit) only displayed a green rectangle, no content. :(
Hi Eric,
I just took a look at Michelle's demo. Did you see trees in the background? If you did, try dragging the green box at least half way across the screen. The slider only has a few stops and they are a distance apart.
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/
This discussion is closed. You can start a new discussion or contact Articulate Support.