7 Inspiring Examples of Parallax Scrolling Websites

Jacey Gulden
Jacey Gulden Web Designer, SyneCore Tech

Posted on April 19th 2014

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!

Jacey Gulden

Jacey Gulden

Web Designer, SyneCore Tech

Representing the new breed of uber-brand journalist, Jacey recently graduated from Indiana University with a BA in Journalism which included a focus on web and graphic design; she also earned two minors in Theater and Psychology. She uses this unique mix of communications experience and web development skill to design functional websites for SyneCore’s clients. Constantly seeking new sources of inspiration, in her free time Jacey can be found perusing Pinterest and interpreting life through Instagram.

See Full Profile >

Comments

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

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.