Parallax scrolling is a great way to add depth to your website — and create an unforgettable user experience.
Check it out in action:
Source: Firewatch
It’s an effect used most prominently in video games. However, parallax scrolling has seen a resurgence in recent years via websites and user interfaces looking to add personality and flavor to their user experience.
And it’s something you might want to consider using for your next website.
That’s why we’ve gathered the 10 coolest examples of parallax scrolling below to inspire your next design.
Before we do that, we need to take a look at what exactly parallax scrolling is first — and why it’s so effective.
What is parallax scrolling?
It’s helpful to break down the phrase “parallax scrolling” in order to understand it:
- Parallax: The perceived difference in distance of objects in the foreground and background.
- Scrolling: The two dimensional movement of graphics or text on a screen.
Combine them together and you get parallax scrolling — a design technique on websites where elements in the background move at a different speed than elements in the foreground as you scroll up and down. This creates the perception of depth and distance in an otherwise flat website.
10 parallax scrolling websites that blow users away
When used well, it can create a captivating user experience that blows them away.
When used poorly, however, it can be a very overwhelming and messy experience that detracts from the primary goal of your website. (You also have to keep in mind the mobile experience. Many parallax designs can slow or hinder mobile scrolling to the point where it’s frustrating for your user.)
With some testing, tweaking, and best practices, though, you can create an experience that adds to your product’s UX. That’s why we’ve gathered this list of 10 best parallax scrolling websites to inspire your next project.
1. Snow Fall: The Avalanche at Tunnel Creek
“Snow Fall: The Avalanche at Tunnel Creek” is a groundbreaking piece of multimedia journalism by the New York Times. It seamlessly weaves together great feature writing with interactive graphics and, of course, parallax scrolling to create an engaging, informative, and unforgettable article.
The article itself was written by John Branch — but really it was a collaborative effort by the NYT’s design, graphics, and editorial team who came together to produce the piece. Their work paid off as “Snow Fall” wound up winning the 2013 Pulitzer Prize for Feature Writing. Be sure to check it out for some great parallax scrolling examples.
2. Jess and Russ
What happens when two great designers get engaged? Why, they create one of the most enviable and coolest wedding websites ever of course!
Designers Jessica Hische and Russ Maschmeyer created their wedding website to tell the story of their relationship — and they used parallax scrolling to do so. The result is a lovely and romantic narrative that tells a captivating story and puts pretty much every other wedding website to shame (no offense to my married friends).
Though the pair tied the knot in 2012, you can still check out their website today.
3. WebFlow
Webflow’s Interactions 2.0 tells the entire history of the web using parallax scrolling — and boy, is it fun. As you scroll down, you’ll be greeted with graphics and illustrations of how the Internet used to look throughout the years.
4. Make Your Money Matter
Make Your Money Matter is all about spreading the good news of credit unions. While it’s tough to make dry topics like finance seem interesting, the website does it by engaging the user in an interactive way with parallax scrolling.
Take a scroll down the website. By the end of it, you’ll be running to your nearest credit union to open an account.
5. Wolfdog Raven
Come for the parallax scrolling. Stay for the awesome pictures of a wolfdog named Raven. This website showcases a lot of subtle uses of parallax scrolling such as the hollow letters with pictures of Raven behind them. They’re complemented with other design techniques such as the graphics moving just slightly as they come onto the page. It almost gives you the feeling of wolf creeping up on its prey—a very cool effect and an example of parallax scrolling embracing context.
6. Koox
Using parallax scrolling and lush illustrations, Koox tells users all about their food, restaurant, and chefs through a fun and interactive way. And it’s not just on their home page. Users can go through their menu to see a very great example of parallax scrolling in action. The website shows off the different type of delicious fare users can expect at the restaurant as the scroll down. Make sure you don’t make the mistake of scrolling while hungry like I did. I’m still cleaning drool off my keyboard.
7 Epicurrence
Epicurrence is a conference held in Breckenridge, Colorado for creatives to connect, attend workshops, as well as take part in a host of activities like snowboarding, skiing, and snowman building (aka the coolest sounding conference ever).
To help users really immerse themselves into the website, parallax scrolling is used along with stunning imagery of the Rocky Mountains mountains and past conference attendees having fun skiing and snowboarding. It makes the website feel as fun as the conference itself.
8. Gucci
As a part of their 2018 Gucci Hallucinations campaign, the upscale clothing line launched a website that included perhaps the most trippy example of parallax scrolling on this list. The scrolling effect coupled with the surreal illustrations puts users in a fantastical world from the mind of Spanish artist Ignasi Monreal. Throughout the website, users can see Gucci products and clothing interpreted through Monreal’s “utopian fantasy” pastiche. It’s a very cool, surreal experience not unlike that trip you took last year to Burning Man.
9. Apple iPad Pro
For their iPad Pro, Apple decided to create a parallax scrolling website that takes users through all of the specs and features of their product. Rather than scrolling up and down though, the scrolling effect takes users sideways as they view the product from different angles and see all the different things one can do with the iPad.
10. Lopesce
An incredibly fun and interactive website for *checks notes* Italian frozen fish snacks? Sure! Why not? Lopesce takes users through different products they have to offer as they scroll down. With each product, illustrations of their ingredients dance around the screen. It’s a unique and quirky website for a unique and quirky product that does a great job making an otherwise odd snack look inviting and fun.
Interested? Let InVision help you.
Parallax scrolling can give your web page a sense of depth and life that a static website wouldn’t otherwise have. It can also help immerse your user while giving them a fun, playful experience.
If you’re interested in using parallax scrolling on your website, we want to help out with inVision Studio. This is our in-house platform for easy, collaborative design.
Check out a quick demo on how you can create the parallax scrolling effect below.
You can download inVision Studio for free today. Just click here and get started designing.
Happy scrolling!
by Tony Ho Tran
Tony is a content marketing consultant and freelance writer. His work has been seen in Business Insider, MSNBC, Hootsuite, and GrowthLab.
