Hundreds of thousands of customer conversations happen on social media every day. Learn more about social listening on the next #SMTLive webinar. Register here.

7 Inspiring Examples of Parallax Scrolling Websites

7 Inspiring Examples of Parallax Scrolling WebsitesThe Parallax scrolling effect is taking the web world by storm as one of the top web design trends of 2014. Across the web, we’re seeing it pop up on just about every type of website. Whether it’s B2B or B2C, this design effect provides a great platform for brands to tell their stories and keep users engaged.

Before we dig in, it’s worth noting that parallax scrolling has a different definition depending on who you ask. Rob Palmer has written a great piece dissecting the trend and defining “true” parallax design. The examples below are based on his notion of “true” parallax containing three levels: you the viewer, an object, and the background to create the notion of depth and movement on a webpage. Without further ado, here are 7 examples of parallax scrolling websites to help inspire your next project.

1. Sony: Be Moved

This microsite by Sony is a great example of how parallax can be used for the art of storytelling. Absolutely amazing parallax effects are used to assemble products right before your eyes as you scroll down the page. It's artistic, beautiful, and one of my favorites on this list!

 

sony parallax

 


2. Seattle Space Needle

This tourism site introduces visitors to the Seattle Space Needle. It differs from a lot of parallax sites in that you scroll up rather than down as you digitally experience a journey to the top of the Space Needle. This site is both whimsical and informative and it's a great example of how the effect can be used to juxtapose photography and illustrated elements to give the illusion of depth.

 

needle parallax
3. Rimmel London

Rimmel's site exemplifies how parallax can be used in an e-commerce setting. As you scroll, each section focuses on a particular set products. Before parallax, it's quite likely that this large top image section might have been an image slider. But, I believe the scrolling effect to be far more effective in terms of user engagement. In this design, users control what they see and when they see it versus having to wait for a pre-assigned animation time to trigger the slider.

 

rimmel parallax

 


4. Wipro: Future Thought of Business

This site by Wipro uses parallax design to present data in an aesthetically pleasing and unique way. It's essentially a giant infographic that moves! This particular site shows how the parallax scrolling effect can be used for even the most seemingly mundane content to make it more useful and engaging for your visitor.

 

wipro parallax

 

5. University of South Carolina

The homepage for the University of South Carolina places focus on the university's community involvement program. In this case, parallax scrolling is used to tell the story visually by combining data and photos rather than just copy.

 

sc parallax

 

6. Von Dutch: Kenneth Howard

The Von Dutch brand utilises parallax scrolling to tell the story of their founder Kenneth Howard. A great deal of photography and typeography are incorporated into this site that allows the brand to showcase their humble beginnings. Parallax as a storytelling technique can be a great marketing tool to sell your brand image rather than just your products.

 

vondutch parallax

 

 

7: NY Times: Tomato Can Blues

This last one is an oldie but a goodie. The New York times has been experimenting a great deal with parallax scrolling as an online publishing technique.  In this example, the website itself isn't fully parallax, but as you read the story - the images within the article are great examples of a different way to incorporate the scrolling effect.

 

tomato parallax

 

Parallax web design is a hot new trend in web design that can be used by your brand in a variety of different ways. If you're thinking about updating your website, or undergoing a full website redesign, this is one trend that shouldn't be overlooked!

Join The Conversation

  • maneuverup's picture
    Apr 20 Posted 1 year ago maneuverup

    I agree with Micheal. Cool looking and a sense of wow, but when it comes down to getting info it is a terrible design. Functionality first then design.

  • Michael I's picture
    Apr 19 Posted 1 year ago Michael I

    Hi Jacey,


    Definitely an interesting article and interesting to see how those companies have put their sites together.

    I give them thumbs up for 'creativity' however my own opinion is I find the usability quite awkward.  I have seen this on other sites and left, simply because it didn't feel right.

    Nonetheless, appreciate the article and a viewpoint as to where things may be going.

     

    Michael

    24-7 Press Release News

Upcoming Webinars

Whitepapers

  • April 24, 2015
    Pinterest is a critical channel for any e-commerce brand. With over 70 million registered users, it deserves to be a big part of any social...
  • April 10, 2015
    With its 271 million monthly active users who produce 500 million tweets per day, it’s getting harder and harder to ignore Twitter as an im...