Parallax Scrolling – An Engaging Design Technique
Planning for a new website? If so, it’s worth your while to consider the new “scrolling” design technique. While it won’t work for every type of site, if it does fit, it can help a site stand out against it’s competition.
Interesting and Cool
The technique uses multiple backgrounds which seem to move at different speeds to create a sensation of depth creating a very engaging and fun browsing experience.
Tools of the Trade
Officially this is known as “Parallax scrolling”. How is this accomplished? What makes this possible is the latest version of html, i.e. HTML5 and it’s “ParallaxScroll” tag … along with CSS3 and a little JQuery.
Let’s Get Scrolling!
Below are some of my favorite scrolling sites … enjoy!
- Activate Drinks – http://activatedrinks.com/
- Nike Air Jordon – http://www.nike.com/jumpman23/aj2012/
- Honda CR-V – https://crv.honda.com.au
- Atlantis World’s Fair – http://lostworldsfairs.com/atlantis/
Learning the Technique
Like to give this a try? Below are some useful tutorials on this technique … Good luck!
HTML5 – TechRepublic – How to implement the parallax scrolling effect
jQuery Plugins – Splashnology – Parallax Scrolling: Tools, Articles and Tutorials
International Digital Strategist, with a love of technology and people ... and bridging the gap between the two.
Norris, Inc. 
Great comment about parallaxing working better on some sites then others – I completely agree. When it’s done in the right context it really makes a site “pop.” Also, love the examples where scrolling triggers animation of some sort!