Custom Web Design Trends: Parallax Scrolling

One of the hottest new trends in web design is a technique called parallax scrolling, which is the latest addition to a growing list of effects used to create a sense of depth on a web page. Throw out your misconceptions that Flash and video are the only ways to achieve the third-dimension. Parallax techniques use well defined imagery, JQuery and CSS3 to create a truly unique browsing experience.

How It Works

Picture this: You've taken the scenic route to Ma's house for Thanksgiving. You're in the back seat staring out the window, taking in the beautiful view. Now, relative to your seat in the car, what do you perceive to be whipping by the fastest? The striped center line on the road, right? The trees on the side of the road aren't moving quite as fast, but they're faster than the mountains in the distance. And the setting sun doesn't seem to moving at all, does it?

We perceive each of these elements moving at different speeds and this phenomenon contributes to our perception of depth.

So how does this translate to the web? Basically, we slice up the scene into layers. The stripes on the road, the trees, the mountains and the sun all become a separate background image. Then, as the user scrolls through the website, the layers move at different speeds, creating a perception of depth.

Examples

Eric Johansson

Let's start with an example similar to the anecdote I've laid out above. Eric Johansson uses parallax scrolling in a horizontal manner. Use the scroll bar at the bottom of the page to move from left to right. Notice the illusion of depth created by the landscape layers.

Typically, horizontal scrolling is frowned upon by user experience experts because the general population just isn't ready to scroll horizontally. By my estimation, they're still getting the hang of vertical scrolling and their brand-spanking-new browser, IE7. So many web gurus have turned the technique on its side and created the parallax illusion vertically.

Old Pulteney

Old Pulteney is a nice example. The clouds layered over the ocean creates an visually interesting bird's eye view. The content on the page is a third layer and also moves at a different speed.

Drupalcon Denver

The website for upcoming Drupalcon Denver has been highly acclaimed for its parallax effects. The site doesn't do much with the background, but does a beautiful job moving imagery within the content — sliding, floating and fading.

Nike Better World

Even heavy hitters like Nike are getting in on the fun. This is probably my personal favorite. It just oozes modern design and really drives home the Nike brand. Check out the running shoes in the second frame. Bananas!

Step Right Up!

In closing, I would love to work on one of these sites. If you've got a taste for cutting edge design, call me and we'll push those boundaries with your brand. Don't be left behind!