7 Inspiring Examples of Parallax Scrolling Websites
Like it?
comment
1
Posted April 19, 2014
Keywords: Best Practices, Content, Engagement, Influence, Marketing, Tools & Apps, design innovation, parallax scrolling, website design
|
The 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.
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!
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.
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.
This site by Wipro uses parallax design to present data in an aesthetically pleasing and unique way. It'sessentially 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.
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.
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.
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.
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!
