Parallax scrolling's been around for a while but it's one of those web design trends that just keeps on going. Parallax scrolling is when the website layout sees the background of the web page moving at a slower rate to the foreground, creating a 3D effect as you scroll. Used sparingly it can provide a nice, subtle element of depth that results in a distinctive and memorable website.
To show how it should be done, here are some sites that employ the technique to brilliant effect. In some cases the parallax scrolling is the star of the show; in others it simply adds a touch of depth that makes the foreground seem to pop out a little.
If you fancy really pushing the boat out, these impressive CSS animation examples showcase another great way to make your website stand out from the crowd. And you can also check out our best web design tools that'll help you in your design endeavours. For now, though, let's take a look at some sites using parallax scrolling in very much the right way.
01. Web design art history
The history of art and web design aren't subjects you would necessarily put together, but they are beautifully united in this web design art history site, which traces the future of web design by looking at art through time.
There are a range of parallax scrolling techniques at play here, meaning that users are constantly surprised and delighted as they scroll down the page. This one is well worth spending a bit of time exploring.
02. The Qode Interactive Catalog
The Qode Interactive Catalog has a stylised bottom text navigation system to reveal an image for each item. Clicking on the catalogue then sees horizontal parallax scrolling used to showcase a range of WordPress themes. It's not the most ground-breaking use of parallax scrolling in this list, but it serves its purpose well. A spattering of animation is also used to good effect.
Designed by Marcus Brown and developed by Aristide Benoist, Canals takes you on a 400-year journey through the history of Amsterdam 17th century canals. The site's designed to provide an editorial-style experience, like leafing through a lush coffee table volume, and it make great use of parallax to draw your attention to new sections of its story, and to give the site a subtle depth effect.
04. The story of The Goonies
Anyone of a certain age is guaranteed love '80s teen adventure flick, The Goonies, and if that's you then this site is sure to get your nostalgia glands throbbing. Created by Joseph Berry using WebFlow, The Story of The Goonies is a tribute to a retro classic that uses parallax scrolling to draw you into the story, introduce you to the characters and reveal mode about the film.
The immediate focal attraction of Dogstudio's site is a beautiful animated 3D dog – or is it a wolf? – in the centre of the page, that scales and rotates as you scroll your way down the parallax page. Its lighting changes colour as you hover over the titles of Dogstudio's recent projects, and perhaps our favourite bit is when it revolves in front of some of the page copy, obscuring some of the text.
ToyFight is an award-winning creative agency, and its website is a whole lot of fun. Founders Jonny Lander and Leigh Whipday have turned themselves into 3D figures, which appear in a range of scenes throughout the site (including this cheeky Sagmeister & Walsh reference). Clever use of parallax amplifies the 3D effect, and paired with bold, bright, plain backgrounds, never becomes overwhelming or irritating.
07. Diesel: BAD Guide
84.Paris created this impressive parallax website (and associated social media campaign) to accompany the launch of Diesel's BAD fragrance. The one-page site presents the series of rules that make up the 'BAD Guide'.
The user can explore by dragging the mouse around the parallax page, which is laid out like a pinboard of images to click through. There's advice on everything from Tinder ('Swipe right, right, right, right – you'll sort them out later') to Instagram ('Don't forget to get in touch with an ex on Thursdays #TBT'), accompanied by monochrome illustrations.
One of the most beautiful examples of parallax scrolling we’ve seen is this website for the game Firewatch, which uses six moving layers to create a sense of depth. It’s great because there’s no scroll hijacking (something that often accompanies the parallax effect), and it’s only used at the top of the page – the rest of the site is still so you can read the information without getting seasick. If you want to see how it’s done, here’s a nice demo on CodePen.
09. GitHub 404
GitHub's 404 page isn’t strictly parallax scrolling as the effect happens on mouse wiggle as opposed to scroll, but it’s a really fun page that uses layering to add depth. Unlike 'proper' parallax, the background moves faster than the foreground, creating a disorienting, otherworldly feel.
10. Jess & Russ
It's no surprise that design power couple Russ Maschmeyer and Jessica Hische's wedding website is a beauty to behold. The site charts their romantic story, with parallax scrolling used throughout to add depth to the illustrations. They got married in 2012, but the website is still well worth a look.
11. Make Your Money Matter
Finance and money are hardly the most interesting of subjects. But New York-based digital agency Firstborn is quids in with this dynamic parallax scrolling website Make Your Money Matter for the Public Service Credit Union.
With the aim of teaching the public the benefits of joining a credit union, rather than using a bank, this brilliant site includes everything from how a credit union works, to where to find one and how to apply, as well as a calculator showing just how much banks profit from customer's deposits.
Design and development agency Madwell, based in New York, shows off its portfolio with a range of parallax scrolling effects to create a noticeable 3D style that adds a huge amount of depth.
13. New York Times: Tomato Can Blues
In today's era of low attention spans and bite-size media, how do you attract people to longform journalism? Tomato Can Blues is a great response to that problem from the New York Times, combining some clever web design techniques with storytelling and comic-inspired illustrations created by Atilla Futaki.
One of the best examples of parallax scrolling we've seen, the article takes you through the story of a cage fighter written by Mary Pilon. As you scroll through the content, the illustrations come alive with clever animations and alterations, allowing you to fully immerse yourself in the content.
Futaki's illustrations were based on police records, witness accounts, photographs and the reporter's notes, and the attention to detail shines through. All in all it's a great reading experience – is this the future of online journalism?
14. Snow Fall
One of the first sites to really push the boundaries on what you could do with longform editorial content online, the New York Times' Snow Fall article combines a range of different elements, including parallax scrolling and web video.
The article, about the horror of an avalanche at Tunnel Creek, was published online in December 2012 but still stands strong as an example of what you can do with parallax scrolling. The newspaper presented the Pulitzer-winning article in an innovative way that grabbed the design community's attention worldwide.