Parallax Scrolling: Examples and History

Parallax is more than just a Green Lantern villain. The term “parallax” refers to the apparent movement of objects when viewed from different positions. The everyday example of this is seen driving on the highway-- when you look out the window, electrical poles near the road seem to zoom past, while trees in the distance appear to slowly drift by.

On-screen parallax movement started in the early days of animation, when Disney (and others) used multiplane cameras to simulate depth of their 2D scenes. Snow White and the Seven Dwarfs was the most popular of these early parallax movies. Disney eventually upgraded to a seven-layer multiplane camera, which could show seven different planes of movement at a time.

Parallax scrolling became very popular in 2D video games as well. Sonic the Hedgehog (among many others) simulated a distant background by slowing the movement speed for background planes, and keeping it at a consistent, hedgehog-quick speed for foreground objects. This gave the appearance of depth using entirely 2D sprites.

On the web, the parallax movement started very simply, with only two layers. Using this technique, a foreground layer with transparent bits scrolls over a background layer, giving the illusion of interactionary movement. Think Geek has used this method for many years with their background imagery. We Bleed Design offers another great example of transparent PNG simulated parallax.

With javascript advancements over the last few years, designers and developers now have a much richer canvas on which to build their sites. The potential for parallax scrolling sites is no longer limited to a certain number of layers, nor by a scroll bar. As a result, every parallax scrolling site is a completely unique experience.

Some parallax sites give the impression of depth, similar to the effect created by multiplane animation. Other sites have taken these parallax techniques to dramatically alter the definition of what a webpage can be, using scrolling to introduce new elements, and create motion beyond the y-axis. Nike was one of the pioneers of this technique with their Better World campaign, and continues to innovate. (The current version of the Better World site is no longer parallax.)

Not every website is a good candidate for parallax scrolling; the effect has its limitations, particularly across mobile and tablet devices. But when the situation is right, consider the potential of parallax. We added parallax scrolling to clickrain.com, and have collected a few of our favorite parallax examples here.

As the technology evolves, we're likely to see more (and more intricate) examples of parallax scrolling sites across the web. Find a great parallax example? Leave a comment below and share your scroll-friendly sites.