Custom Web Design Trends: Parallax Scrolling

April 26, 2011
custom web design trends

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?

layers_0.pngWe 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.

eric-johannson.png

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.

pulteney.png

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.

drupalcon-denver.png

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!

nike.png

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!

Comments

These are some really cool

These are some really cool parallax examples, Andrew. Another cool site using the parallax technique is Campaign Monitor's Hiring site:

http://www.campaignmonitor.com/hiring/

So many great sites starting

So many great sites starting to implement the parallax effect. It's awesome. Just feels like it's still not ideal for mobile though yet as it seems to process so much that it crashes the browsers. A sick site you HAVE to check out implements one of the best horizontal parallax concepts. Pretty similar to hbogo and godspell's site.

http://www.reneethemovie.com

@Calen, that's a great site!

@Calen, that's a great site! Very fun to scroll through. Nice layering.

I love when a user clicks on

I love when a user clicks on the blue buttons and it actually pops ups and keeps you on the site without directing you away. http://www.godspell.com site always linked out and I felt like it took away from the overall experience. Glad it was implemented well.

Pingback

[...] 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 Parallax Scrolling – Example of Latest Parallax Scrolling 2013 Effects As far as the web design industry is concerned, parallax scrolling is an amazing practice of the arrangement or animation of images to create an illusion of 3D effects. Parallax scrolling is a term used to describe an amazing technique used extensively by web designers to create a special effect in websites to add a 3 dimensional depth illusion to the design. In layman terms, parallax scrolling is all about making the background and foreground images move at different speeds allowing for the 3-D illusion. [+] Web Design kida72124 home • iPhone & iPad app • android app • contact • blog • facebook • twitter to experience pearltrees activate javascript. [...]