Parallax Scrolling

It’s a hot term in web design right now, but parallax scrolling is by no means a new thing. It’s a technique that was developed in traditional animation in the 1930s and involved a multi-plane camera that moved different layers of artwork across the camera at different speeds to create the illusion of depth.

The same technique in a digital form then became popular in the 1980’s when 2D video-games started using it. It began with the arcade side-scrollers Moon Patrol and Jungle Hunt, but quickly became a go-to technique for any 2D video game. Indeed, it’s a technique that is still often used today, especially in simple, browser-based games.

Essentially, parallax scrolling is a technique where background images move slower than foreground images. This creates an illusion of depth — things that are closer to us move faster, things that are further away move slower.

How is Parallax Scrolling used in web design?

In 2011, Nike launched a website called ‘Better World’. This website used HTML5, Javascript and CSS2 to create multiple layers that scrolled at different speeds. The effect was completely unique, and within a few days many web designers were eager to recreate the look and feel of this groundbreaking website.

At first, people used parallax scrolling everywhere simply because they could, but over time web designers began to approach it in a more nuanced fashion — as a tool to create a better user experience, a technique to help with storytelling on the web, and a way of using design that could help draw attention to different content. It’s a great technique to use when creating timelines, taking users on a journey, or when you really want users to engage with content in a very structured way.

Now parallax scrolling is used to great effect on a wide variety of sites.

Parallax FREE Templates to Download:

To lean Parallax go to…