hide me

Top Examples of Parallax Scrolling in Web Design

Top Examples of Parallax Scrolling in Web Design

Parallax Scrolling

Parallax scrolling is an awesome effect that has recently started gaining popularity on the web. The effect layers images and content which moves around at different speeds and many other variables as the user scrolls through the web page. Here are some awesome examples of effective use of parallax scrolling in web design.

 

Dangers of Fracking

Dangers of Fracking Website
This site demonstrates the power of parallax scrolling quite beautifully. The site actually tells a story as the user scrolls down, making the site very enjoyable to interact with.

Jess and Russ

Jess and Russ Website

This site is a nice example of using parallax scrolling for an interesting effect while not overusing the effect just to use it. As you scroll down the page you are introduced to boxes that help the viewer visualize their story. The boxes play well with the text content on the site to bring everything together in an interesting presentation.

 

Angry Orchard

Angry Orchard Website

This is one of the most visually interesting sites you can set your gazing eyes upon. This site employs an untraditional sideways parallax scrolling effect that is controlled by normal up and down scrolling to avoid user confusion. As you explore their website they create the experience that you are spending your day at the actual orchard itself!

 

Skrollr

Skrollr Website

Skrollr is actually an open source Javascript library for creating the parallax scrolling effectson your website. This page is the demonstration page for what the library can do and shows off the effects quite simply and directly with the complimenting comments and effects.

 

Piccsy

Piccsy Website

This site uses the parallax scrolling effect in a slightly different way than the other examples that we have showcased so far. This site uses the scrolling effect to create the illusion of different sections on the site.

 

Inception Explained

Inception Explained Website

Inception Explained is an excellent use of parallax scrolling to explain the details of a movie that is quite complex to understand. As you scroll through the site, it details the story and highlights information via the parallax scrolling in a way that makes it easy to grasp much of the information.

 

Metsa

Metsa Website

This site really utilizes the parallax scrolling effect in a visually heavy way. As you scroll the entire page is changing images in the background as well as the foreground making the entire page interesting to look at.

 

360 LONG STREET ZURICH

360 Langstrasse website

This site, like a few of the others, tells a sort of story as the user scrolls through the site. This site uses the parallax scrolling effect coupled with Google Street View images to make the experience of the website very original and authentic as the user scrolls through the city like they are racing around on a wild police chase.

 

Nike

Nike Choose Your Flight Website

Nike pulls out all the stops on this one, using the parallax scrolling effect to really show off this shoe. As you scroll through the page you get an exhilarating experience of how the shoes are built for perfection.

 

Hobo Lobo

Hobo Lobo of Hamelin Website

This is an excellent use of parallax scrolling to tell a story. As you scroll through the web site you will see different characters being animated a little text to go along with the story.

This article was written for you by Chris Steurer, a freelance marketing consultant and designer for small and medium sized businesses. You can follow me on Twitter or circle me on Google+ to say hi and stay connected.

  • Theloop
  • The BPDS newsletter