It originates from the multiplane camera technique used in traditional animation and early video games when background images move slower than foreground images creating an illusion of depth and immersion. The direction of the movement can be horizontal or vertical.
There are very few studies on how parallax scrolling affects user experience, but one published in 2013 by Purdue University concluded that “… although parallax scrolling enhanced certain aspects of the user experience, it did not necessarily improve the overall user experience” At the same time, they also found users tended to rate parallax scrolling designs as more “fun”.
Parallax scrolling advantages
- It engages the users and gives them a feeling of immersion
- Can help the user navigate through the page by highlighting certain page elements through movement
- Will give your visitors and sense of control by letting them move around the page elements
- It will gamify their interaction with their interface (and as a result, feel that it’s “fun”)
- It can help with SEO scores by improving the average time users spend on your page
- Because there are still relatively few such websites, it will make yours look and feel more unique and cutting-edge
Parallax scrolling disadvantages
- When parallax scrolling is combined with a large number of page elements it can make the overall experience confusing
- By giving control to the user over the page elements there is always a risk that they won’t interact, and will miss out on some of the content
- It can make your audience focus completely on the design, instead of the content
- Using large images and multiple layers can slow down your site and badly affect your page speed SEO score (best practices)
- Some older browsers won’t support the advanced CSS solutions you’ll need for an optimal execution
When to use it
If there is a complicated narrative you’ll need to guide your user through, parallax scrolling might be for you: you can break down your story, assign different visuals, and show its development through time. You can also turn it into an infographic that will help your visitors have a visual overview and easily digest your content. If you have a page where you expect your visitors to immerse in the content instead of running to some CTA option, it’s also a good tool.
When not to use it
If you know your visitors want nothing at a certain place but to get to the point (like finding a specific product and finishing the order), there’s no point in distracting them. Simply save this solution for other times and places. If you know that a significant amount of your users are still using outdated browsers, it’s better not to have this at all.
Some good examples of parallax scrolling web design as a tool of storytelling are the Goonies website which translates a movie concept to the web, or Jess and Russ’ site which tells a story of their relationship. But it can also tell the story of a whole company or specific project in the case of EDF or the Cancer Research Foundation. It can be also used to make an essentially one-page website look visually more interesting, as seen on the Nika Agency website. Speaking about animated infographics some websites I’ve found impressive are Weglot’s and the one made for NASA’s Prospect project.
The Goonies website, Jess and Russ’ and EDF’s website
Weglot’s and the the Cancer Research Foundation‘s website, NASA’s Prospect project site.
At the Cecily Group, we are always on the lookout for up-to-date design solutions and strive to find the best possible tools.
Parallax scrolling is an excellent tool for animating illustrated stories or time-based charts, and as such, we are looking forward to using it in the future.