Parallax Scrolling - the good, the bad and the questionable

How does it work?

Parallax scrolling is where various parts of an image move at different speeds to create the illusion of depth.

Essentially the page is made of multiple elements containing images or other content, which are given a fixed position using CSS and z-index values so that layers appear either in the foreground or the background.

To achieve the parallax effect whilst scrolling, Javascript is used to track when the user is scrolling down the page and to move the appropriate elements a varying amount to get the right effect. For example, foreground items would move more than items in the background.

Parallax scrolling can be used very effectively for infographics - check out the BBC’s write-up for more information.

Why is it so popular?

Whilst the idea itself is nothing new - having been used by names such as Disney since the 1940s - its introduction into web design has seen its popularity skyrocket.

It’s a technique which can be used for a variety of purposes, from infographics and sales pitches to product tours and agency websites. This flexibility lends itself to more outlandish concepts and lets designers really stretch their legs. Not only that, but the initial ‘wow factor’ can help gain publicity through word-of-mouth, on social media, as well as getting featured in various showcases (both online and offline.)

But for all the benefits there are occasional trade-offs that have to be made when designing and creating parallax-scrolling sites. Namely, the emphasis on design over the content. This can  have a knock-on effect when it comes to readability, search engine rankings and the overall effectiveness of what you’re trying to say; which are all pretty important if you’re relying on a parallax-style site as part of a marketing push.

We’ve taken a look at a handful of some of our favourite examples of parallax scrolling sites and analysed what they do effectively, along with some constructive criticism on where some could potentially be improved.

Every Last Drop

Every Last Drop is a lighthearted infographic from Waterwise that guides the user through a day in the life of an ordinary person, highlighting how much water is used for common tasks and encouraging them to save more in the future. It features some great custom illustrations and is commendable in getting people to save more natural resources.

However the captions and statistics that sit alongside each scene are relatively brief and lack any real context until the end, where the ideas behind the campaign are explained. This may be intentional - keeping the audience guessing and scrolling along until they reach the end - but this takes away from the initial impact of the whole thing.

Bagigia

Bagigia could arguably not even be considered a website, instead coming across as more of an interactive product tour. The viewer is walked through a rotating mock-up of the product with its key features highlighted and explained in great detail. Alongside this are various opportunities for big photos and other marketing paraphernalia - “behind-the-scenes” talks with the designers and the manufacturing process.

These are the kinds of things that parallax sites excel at, allowing designers to fill the screen with great high-quality photography and neat interactive elements. This lends itself well to desktop and big TV screens. However, try opening the site on any kind of mobile device, and all of this is skipped in favour of taking you straight to the purchasing page.

Translating large parallax sites to mobile screen sizes - especially alongside a responsive design - is tricky, and whilst there have been some advances in this area it is often simplest and most effective to just scrap it entirely for mobile screens. However consumers are becoming more and more used to getting a consistent experience across all their devices and so this approach may not last forever.

Whiteboard

Whiteboard take the rare step of combining video with parallax scrolling, choosing to show a simple background video with staff at work in various locations around their offices. This immediately sets a professional tone and makes the group come across as more personable, as a potential customer can instantly start getting to know each staff member and what their duties may be.

What makes this example most effective is that both the parallax scrolling and the video are used sparingly, more as background “noise” than as any real meaty content. This can often be the best way to use parallax - as an enhancement to an existing design, instead of as the whole design itself.

Lost World’s Fairs

Lost World’s Fairs is another example of parallax scrolling being used as part of fun infographics, this time taking you on tours of mythical (or just highly unattainable, in the case of the moon) locations by way of scrolling down the page.

The most effective of these is Atlantis with the user starting inside a small capsule at sea level and slowly descending under the waves, telling the story of an imaginary World’s Fair held under the sea. It’s full of short, fun facts (“Did you know the national bird of Atlantis is the sting ray?”) and the vintage design and feel immediately sets a tone that is then effectively carried through the rest of the page.

By being restrained with the use of parallax scrolling and instead focusing on the written and illustrated content, Lost World’s Fairs are much more effective than most interactive infographics.

Bonus Round: Nizo for iPhone

Nizo has been “coming soon to the App Store” for months now, but their single-page site still a great example and a neat twist on the traditional parallax scrolling concept. Initially the user can just see an iPhone, but as they scroll down the individual parts of the app’s interface are laid out alongside it, as if it had been deconstructed and set out on a table for reassembly. Hopefully the app itself can live up the high standards of its teaser site!

THIS WEEK: Parallax Scrolling! Will it ruin your site's SEO? @awwards have some thoughful tips and tricks here: http://t.co/Ij8bM7ZAhZ

— Curve Agency (@CurveAgency) July 22, 2013