Parallax scrolling is described in its Wikipedia entry as “…a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.[1] The technique grew out of the multiplane camera technique used in traditional animation since the 1940s,[2] and was popularized in the 1982 arcade game Moon Patrol.” Recently, it has also become possible to do this in the browser using HTML, CSS and jQuery.

We’re going to look at a few examples of where this technique has been enlisted to create engaging, immersive and highly interactive user experiences in web design.


First up is a promotional site for Nike’s Air Jordan basketball shoe, AJ2012.

Seriously, the mind boggles. Although this example, like most others, incorporates jQuery plugins to respond to and capture input from the mouse’s scrollwheel, what has been achieved here is the equivalent of a Matt Hoffman 180° backflip. The page and its content doesn’t just scroll vertically, it scroll multi-directionally, and as it does so employs the parallax effect on multiple levels to give a huge amount of depth and dynamism. This might just be the most sophisticated use of the technique to date.

http://www.nike.com/jumpman23/aj2012/


Next up is a site for MINI Japan to showcase their new MINI Crossover.

The techniques employed here might not be quite as complex or sophisticated as that of Nike, but the execution is great with lots of good ideas taking full advantage of the technique. What’s important to note is that it’s more the idea of changing the way the scrollbar is used as a navigation tool than to give an impression of layers or depth. In this example the scroll position of the page in pixels is used as a timecode to control the playback head of what is essentially one long animation. To this end, the scrollbar becomes more like a playback scrubber. The position of all the elements is controlled by jQuery based on the scroll position which is in turn controlled by the user grabbing the scrollbar or rolling the mousewheel.

http://www.mini.jp/event_campaign/big-point/


The last one I want to take a look at is a product showcase for bag maker Bagigia.

This one is unique again as not only can you control the site with the srollbar and mousewheel, but there’s also a slider in the site itself which you can scrub left and right to run through the animation. What blows my mind with all of these sites we’ve looked at thus far, is the fact that they’re all, to some extent, responsive designs. When you resize the browser window, the elements of the page and its background slide over one another to suit the viewport size. The Bagigia site features some great 3D flyarounds of the product along with great photography.

http://www.bagigia.com/


Caveats: Although these sites look great in a modern browser on your desktop machine or laptop, they don’t work so well on hand-held devices such as tablets and smartphones. The iPad for example renders the changes in the position of elements controlled by Javascript and responding to scroll position after the page has come to rest from iPad’s trademark inertia scrolling. This means you scroll, the page comes to rest, then the animated movement plays out, often at high speed. These sites don’t look great on handheld devices.