The Evolution of Parallax Scrolling

As soon as RGA produced the Nike Better World Web site, the Web design world was abuzz with this thing called parallax scrolling. (I’m sure there were earlier examples, so if you know of any, please feel free to leave a comment with a link.) This “new toy” began spreading around the Web like wild fire. Designers and developers began using this technique in the most gratuitous ways possible.

The idea is simple, have a foreground, middle ground and background as part of your composition. Then when scrolling, use JavaScript to move these 3 elements at different paces. If done right, the background will move slower then the middle ground, which will move slower than the foreground, giving the user a sense of depth and motion.

The idea of parallax scrolling, or layered motion is new only to the Web. It has been employed for years by animators and game developers to give 2D spaces a sense of 3D reality. Below are some notable examples of parallax effects throughout time, with an emphasis on some of the latest iterations of this exciting technique.

Cartoons

Steamboat Willie
Steamboat Willie (Walt Disney, 1928)

The Flintstones
The Flintstones (Hanna-Barbera Productions, 1960)

Before parallax scrolling, there was simply scrolling. Items in the background moved past at the same pace giving the illusion of motion but not the illusion of space or depth. The following two sites use transparent PNGs and fixed positioning to create a terrific sense of motion, without any parallax.


Lost Worlds Fairs (Atlantis) by Frank Chimero


janploch.de

Animated Gifs


Party Cat from Bright Light Bright Light.

Another technique for creating depth and motion is with simple animated gifs. These unique images are created either with a stereophonic camera, which shoots two images, or by taking frames from a motion picture, like in the example above.

Video Games

Super Mario Bros. 3 (Nintendo, 1990)

Then came parallax scrolling. Super Mario Bros. 3 was the first game that I can remember that split up the foreground, middle ground and background to give a slick feeling of depth. Much like the Nike Web site example, this sensation of depth added to the experience of playing the game in a way that was new and fresh.

Scrolling Effects

So then, as mentioned, Nike Better World became the first mainstream example of parallax scrolling.

Nike Betterworld
NikeBetterWorld.com


LiptonIceTea.pl/

This site from Lipton uses a side scrolling effect along with blurring of the foreground and background elements to heighten the sense of depth.

This technique continues to evolve from up & down, side to side and now in and out. This example takes users into the page.


Beer Camp

Moving beyond that, scrolling can now effect the size and visibility of objects, like in this example created by Razorfish for the Smart Car.


SmartUSA.com

And finally, I’ll bring it full-circle back to Frank Chimero, who always seems to push the boundaries and this gem of a site is no exception.


FrankChimero.com

If you have a great example of parallax scrolling, please post a comment.




Leave a Reply