18 great parallax scrolling websites

One web design trend that refuses to go away is parallax scrolling. With this, 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. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth that helps to result in a distinctive and memorable website.

But to show how it should be done, we've collected together sites that employ the technique to good 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.

01. Made by Few

The site for Made By Few uses parallax scrolling to enhance the handmade vibe

Made by Few is an annual web conference hosted by Few, a design and development agency in Arkansas. Sally Nixon’s detailed, bright illustrations take pride of place on the event website. The staggered parallax effect enhances the handcrafted feel and adds energy.

There are hidden gems scattered throughout the site (try hitting the Konami Code) to keep things fun. “At Few, we love pleasant accidents and encourage exploration, ” says Arlton Lowry, co-founder of Few. “We believe when you provide people with an open and fun environment, there’s no telling what will come of it.”

02. A-dam

A-dam uses parallax to showcase its stylish underwear

A-dam designs original boxer briefs and shorts for men with character, using GOTS-certified organic cotton and handmade by people with fair wages and normal working hours. They're an ethical and stylish alternative to your usual supermarket pants, and their site, created by Build in Amsterdam, showcases them nicely, with assorted parallax elements popping in from all directions as you scroll.

03. Myriad

Bareface's site for Myriad shows off the furniture system's infinite possibilities

Myriad is a range of modular office furniture by Boss Design that's designed to be flexible and reconfigurable, allowing you to build your own working spaces as you see fit. As part of its work on the launch, Bareface created a site showcasing Myriad's infinite possibilities with clever use of parallax elements, pulling in inspiring arrangements of furniture as you explore the site.

04. Firewatch

Each layer of trees moves independently

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.

05. Garden Studio

Layering of the landscape makes it seem three dimensional

In a similar vein, Garden Studio has also opted to use the parallax technique in a sensible and delightful way at the top of its site, before moving into a mostly static page. The shifting landscape is subtle and unobtrusive yet also the star of the show – we found ourselves scrolling up and down again and again. 

06. GitHub 404

GitHub's 404 breaks the rules of parallax for a disorienting effect

This 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.

07. Jess & Russ

Every illustration has a sense of depth

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.

08. Old Spice Dream Runner

Parallax scrolling ties in with the theme of movement here

Dream Runner was an unusual online campaign in which Old Spice offered to turn customers’ run maps into fabulous prizes. Using geolocation data, users could draw their desired prize on screen by physically moving around. The results were loosely and hilariously interpreted by judges, with prizes spanning things like ‘a bent metal pipe’ and ‘inflatable shark leisure product’ as well as bigger ticket items like cars and holidays.

The highly interactive site – designed by Wieden + Kennedy no less – fully embraced the ridiculousness of the campaign. In true Old Spice fashion, the splash screen parallaxed tigers in sunglasses, mythical creatures and old men in unitards in all directions as you tilted your phone or moved your mouse. The fun use of the gyroscope hinted that what was going to happen next would also involve physical movement.

09. Alquimia WRG

Example of parallax scrolling websites Alquimia

Alquimia WRG uses parallax elements to simulate a 3D space environment

Based in Milan, Alquimia WRG is a digital agency that aims to create amazing and effective experiences for brands on digital media. Clean and minimal, and only black and white, the website uses a mixture of the usual suspects (HTML5, CSS, and JavaScript) to achieve a neat package.

HTML5 canvas is used to animate the initial loading image. Subtle "parallax elements in the homepage are dynamically created and animated to simulate a 3D space environment through mouse movement," says Andrea Bianchi, creative director at Alquimia.

Page navigation is achieved via a simple and smooth page sliding effect, which is implemented by changing CSS properties with JavaScript. The works page contains a simple list of selected projects, which, when selected, reveals further information in a smooth sliding effect.

When such content is loading, a JavaScript animated preloading bar appears at the bottom of the screen, which is a nice touch. The site achieves its goal, which, as Bianchi says, "was to create an ideal balance between content, usability and user experience".

Next page: Inspiring parallax scrolling sites transform storytelling and even dry topics into adventures