Using Sliders to Create Parallax Effects in E-Learning #115

Parallax Scrolling in E-Learning #115: Challenge | Recap

How Can E-Learning Designers Use the Parallax Effect in Courses?

How many times have you learned to do something new in a software program you’ve been using for years?

Maybe you discovered a feature or preference you didn’t know existed. Or, maybe it was less about a feature than it was combining features or using the tool in creative ways that enabled you to create something magical.

Creative accidents are one of the best ways to brighten a course designer’s day. While they can’t always be triggered on demand, a sure-fire way to find them is by participating in active communities like E-Learning Heroes.

Learning to use software tools in new and creative ways is like getting a free upgrade. And that’s what this week’s parallax challenge is all about.

What is the Parallax Effect?

Parallax scrolling is a motion effect that’s used to simulate depth by animating background images slower than foreground images. The effect can be found in everything from video games to websites to e-learning. Let’s take a look at some fantastic examples.

How’d You Do That?

A good example of how features can be used differently came from Steve Flowers during the Articulate Storyline 2 beta. Steve was playing with Storyline’s new sliders and shared a way to connect one slider to another.

There’s nothing too exciting about connecting sliders... Not until you consider how easily sliders can be customized.

By changing the visual appearance of a slider using a large image, Steve was able to create a scrolling timeline interaction. Sliders just went up a notch.

Steve Flowers

Comet Landing

Connecting two visual sliders together is cool. But what happens when you connect dozens of visual sliders to a slider? You get a parallax effect that’s out of this world!

Slider possibilities went up a few more levels after Jerson Campos shared his Comet Landing example with the community. Several revisions later, Jerson’s example was awarded a 2015 Honorable Mention in our Guru Awards.

Comet Landing

View demo | Learn more | Jerson Campos

You can learn more about his original project and his Guru Honorable Mention project over at his website.

Interactive Conversations

In a recent challenge, Mark Bennett shared his own take for creating the parallax effect with sliders. By making both sliders full-slide images, Mark discovered a creative way to make the entire background draggable.

Interactive Conversations

View demo | Download | Mark Bennett | Website

Be sure to download Mark’s source file to learn more about his project and how he built it.

Mountain Tours

Here’s a recent example shared by Ross Garner.

I really like how Ross customized the slider’s thumb to visually align with his mountain theme. It's a practical example and one that should help most users begin using multiple sliders to create the parallax effect.

Mountain Tours

View demo | Download | Ross Garner | Website | @R0ssGarner

Football and Anatomy Sliders

Here are two more examples and source files from Tom. I like these examples because they show how multiple sliders can be combined for educational purposes.

Football and Anatomy Sliders

Football demo: View | Download | Anatomy demo: View | Download

Challenge of the Week

This week, your challenge is to create a parallax effect for e-learning using Storyline’s sliders.

Technically, this is our most advanced challenge. Please let us know if you get stuck or have any questions. I don’t want anyone to skip this challenge because they can’t get their sliders to work correctly.

Last Week’s Challenge:

Before you slide into this week’s challenge, take a few moments to zoom through the fantastic examples your fellow community members shared:

35+ Techniques for Zooming and Magnifying Pictures #114
Zooming Pictures RECAP #114: Challenge | Recap


Wishing you a sliderrific week, E-Learning Heroes!

New to the E-Learning Challenges?

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Richard Hill
Richard Hill

So yes, I pulled a Hannibal Lechter(graphically), but think meat slicer front to back. A little tip of the nose, a little more for the cheeks etc. This part can be done in Photoshop or gimp, and you'll need them as pngs for transparancy. The REAL trick however isn't shifting layers it's shifting TIME. All the layers of Astumi are in effect where they ought to be. I simply applied the same animation to each layer, and staggered the time. Hope this helps! ** UPDATE: V2 does not use animations, it uses the same graphics on different slider thumbs, all affixed to the same slider variable. The difference here is that the sliders are incrementally different in length, thus making the parallax effect. As noted above, it is restricted to a single plane, in this case x, so a little of the... Expand

David Charney
David Charney

I have replied to Alex in another message but here is what I had said to him: So the gif of the guy walking forward is in one state and walking the other way is in another state. The way you figure out which way to walk is based on the slider. Every slider has a variable associated and that variable is a number based on how many points you can move the slider to. So it might have 10 points along the way. You always know where you are using the variable. I am at 3, I am at 4, I am at 5, etc. What I also do is create a variable to keep track of where I was. I am at 3 and I was at 2 prior, for instance. Then the next time I move it forward it would be at 4 and I was previously at 3. Because I know this now I can do a simple calculation (4 - 3) and get 1. If I am at 4 and was at 5 it would be ... Expand

David Charney
Michael Hinze
Veronica Budnikas
Michael Hinze
Daniela Slater
David Jordan
David Charney
Jennifer Sader