Parallax scrolling is a technique in computer graphics and web design, where background images move past the camera slower than foreground images, creating an illusion of depth in a 2D scene.1

The use of parallax scrolling is popular amongst web designers at the moment but using the technique in an e-learning context requires a little more thought, which was why we were really interested to see how the e-learning community over at E-Learning Heroes would handle challenge #115, Using Sliders to Create Parallax Effects in E-Learning.

There were some fantastically creative entries and we couldn’t resist joining in, take a look at our entry, a visual Guide to Coffee. What impressed us most was that there were clearly so many different techniques that the community were using to create their parallax examples, showing just how versatile Articulate Storyline 2 can be.

We chose coffee as our chosen subject as we also wanted to complete challenge #116, E-Learning for the Food and Beverage Industry, and were stretched for time, combining both challenges enabled us to enjoy the best of both.

The coffee cups in our demo were drawn in Adobe Illustrator and we used stock photography purchased from iStockPhoto. The font used was Station No.4 from the Kimmy Design foundry.

 

Americano text

Coffee Cup Illustration

Coffee Cup Water Espresso Illustration

 

Once we had our elements designed and optimised, we pulled them all together using Storyline 2 and with the help of sliders, slide triggers and states we think we came up with another demo we can be pleased with.

1. https://en.wikipedia.org/wiki/Parallax_scrolling Accessed 29/03/2016.

David Tait 4pt Limited

David began his career in eLearning in 2000 after earning qualifications in Graphic, News and Infographic Design.

He is passionate about creating well-designed and purposeful eLearning solutions and is a current Articulate E-Learning Heroes Super Hero.