Parallax Scrolling – An Engaging Design Technique

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!

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

One comment

  1. 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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: