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.

List of Parallax Scrolling Websites


Screenshot showing example of parallax scrolling: birds-eye view of motorcycle driving around an empty city at night

Ben the Bodyguard

Screenshot showing example of parallax scrolling: Running shoe floating on a grey background with the shoe's features being called out.

Kinvara 3

Screenshot showing example of parallax scrolling: File folder showing a rocket ship flying around mars

Guide to the App Galaxy

Screenshot showing example of parallax scrolling: Activate beverages floating around with bubbles.

Activate Drinks

Screenshot showing example of parallax scrolling: Photos of people with cancer floating overtop of a photo of a girl getting an MRI

Just Say The Word

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.

Let's Talk

Reach out to our team with questions, comments, or new project ideas. We'd be happy to hear from you.

Get in Touch
Chris Prendergast

About the Author Chris Prendergast // Partner & Chief Operations Officer

Chris Prendergast (M.B.A., Purdue University) helps Click Rain and Lemonly do amazing work for our clients. Advanced in strategic thinking, analytics, and SEO, Chris is a pioneer in the digital space.

Read more »