Web design techniques to extend eLearning

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.

Food and beverage eLearning

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.

How to make your favourite coffee

Use this interactive guide to learn how to mix the perfect coffee.

Related eLearning Posts

Pin It on Pinterest

Share This