Today's advanced web technologies make it possible to create remarkable effects in the browser. While these effects can be gimmicky, when employed in the right way they can result in a distinctive and memorable website.
One fairly recent web design trend is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth. You'll find more advice in our pro tips for building parallax websites post.
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. We hope you find this a useful source of inspiration for your next project, and if you come across any creative examples that we’ve not listed, we'd love to hear about them in the comments.
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.
02. Garden Studio
In a similar vein, Garden Studio have also opted to use the parallax technique in a sensible and delightful way at the top of their 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.
03. GitHub 404
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.
04. Jess & Russ
Fancy scroll effects and illustration are the main attraction here, used to create a beautiful site that tells a story. Parallax scrolling is used throughout to add depth to the illustrations.
05. Alquimia WRG
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.
The site achieves its goal, which, as Bianchi says, "was to create an ideal balance between content, usability and user experience".
06. Costa Coffee
This impressive one paper website, The Costa Experience, is the brainchild of Brighton-based agency Graphite Digital. Having worked previously with Costa Coffee, the team was recently tasked with better communicating its products.
The result was this visually rich, parallax website full of animated illustrations and interactive elements.
Finance and money are hardly the most interesting of subjects. But New York-based digital agency Firstborn are 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, where to find one and apply as well as a calculator showing just how much banks profit from customer's deposits.
The site for Seattle's iconic Space Needle starts at the base of the 605-foot tower and invites you to scroll all the way up to the top, taking in views of Seattle and the SkyCity Restaurant along the way. And if 605 feet isn't quite high enough for you, keep on scrolling and see what you find!
Design and development agency Madwell, based in New York, show off their portfolio with a range of parallax scrolling effects to create a noticeable 3D style that adds a huge amount of depth.
10. Peugeot Hybrid4
Peugeot has gone all out with using parallax scrolling to create an auto-playing comic in the browser. The comic plays as you scroll down the page (or use their autoplay feature which automatically scrolls) and helps to advertise the car manufacturer's new HYbrid4 technology.
Arts consultancy Cultural Solutions employs a subtle parallax scrolling effect to introduce depth to its homepage. Their main brand image is the use of colourful circles - the circles in the background move slower than those in the foreground, creating a subtle 3D effect.
The website for the 2012 jQuery conference made use of a touch of parallax scrolling in order to add some animation to the design. It’s the smaller, subtle effects that make the page seem more fluid, such as the logo and date becoming smaller after you scroll down. The scrolling also triggers animations - like the bicycle that starts to drift off to the right, and the flock of seagulls frantically chasing a shark - which add some personality to the page.
To display the timeline of the war in Iraq, the White House used parallax scrolling to tastefully add something unique. While the content scrolls as normal, the emotional background images remain static – which help them to stand out further.
14. Walking Dead
We're big fans of TV zombie drama The Walking Dead at Creative Bloq, and we were gripped by this website launched to promote it. The imaginative site harks back to the show's comic strip origins and makes clever use of parallax scrolling to pull you into its sick and depraved world.
"We came at this as fans of the show, first and foremost," says lead designer Gavin Beck. "With this drive, we wanted to create a world within the Walking Dead that fans could explore and appreciate.
In today's era of low attention spans and bite-size media, how do you attract people to longform journalism? Here's 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 lately, 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?
16. Snow Fall
Snowfall is the latest buzzword to hit the world of design, drawing on the best traditions of editorial layout and combining them with the exciting possibilities offered by multimedia, including parallax scrolling and web video.
The term is named after The New York Times 'Snow Fall' article, about the horror of an avalance at Tunnel Creek, which was published online in December 2012. The newspaper presented the Pulitzer-winning article in an innovative way that grabbed the design community's attention worldwide.
Here's another page using the Snowfall technique. Written by Simon Cox, The Reykjavik Confessions explores the mystery of why six people admitted roles in two murders when they couldn't remember anything about the crimes. The presentation makes great use of white space and makes a large amount of text, which might seem intimidating in a more traditional web news context, a pleasure to navigate.
Contributions: Creative Bloq staff
This is an updated version of an article that was originally published on 21 November 2014.