While Parallax scrolling designs still look modern, they have been around for a while: the very first such web project was created by a developer called Glutnix in 2007 using JavaScript and CSS 2. However, it became popular with the introduction of HTML5 and CSS 3 coding in 2011, the first famous example being Ian Coyle’s website for Nike.

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.

Best practices

Instead of JavaScript, use pure CSS and pseudo-elements to minimize page slow-down. Pseudo-elements contain no real content, but their property values can affect their parent element without affecting its content. This makes it possible to create a parallax effect with even only one element. In therm of animation, one approach that can be recommended is placing the different layers in a container element and assigning different speeds of movement to them, by transforming the Z-Index property. In general, sticking to transform and opacity changes for your animations will improve your page speed because, to put it simply, they make your browser work less hard on loading page elements than for example the left, top, width, or marginTop properties. The usage of vector elements instead of pixel ones will also help with page speed.

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.