Mountain Dew website screenshot

Parallax Scrolling with HTML5 and jQuery

Its not a new feature that was created yesterday but when its done right parallax websites can be an amazing experience. Parallax scrolling creates an animated depth of field to give the experience of 3D movement with 2D objects.

Some of the standouts are:

Air Jordan 2012

air-jordan-2012
http://www.nike.com/jumpman23/aj2012/

Bagigia

bagigia
http://www.bagigia.com/

Mountain Dew

Mountain Dew screenshot
http://mountaindew.com/

 

How to

So you want to create your own parallax site, well save yourself some time and use Skroller.

skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position. All you need to do is define key frames for each element at certain points in top offset.

skrollr

Demo: http://prinzhorn.github.com/skrollr/
Download: https://github.com/Prinzhorn/skrollr

I want to lean it manually

Ok so you want the ins and outs, well Jonathan Nicol over at Pixel Acres has already created an excellent article covering how to create a simple parallax site from scratch. Check it out here: http://f6design.com/journal/2011/08/06/build-a-parallax-scrolling-website-interface-with-jquery-and-css/

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>