To Add the Parallax Effect or Not

Editor’s Note: This post was originally published in December 2013 and has been completely revamped and updated for accuracy and comprehensiveness

The parallax effect in simple terms is when something in the foreground appears to be moving faster than objects in the distance. One of the earliest uses of this effect for entertainment is the older 2D video games that had objects in the foreground moving at different rates than those in the background, producing the illusion of depth.

Today and ever since 2013 there has been a rising appearance of parallax in the web design and user interface (UI) industry. As with all new-fangled things (especially when the web is concerned), moderation may be the key to making it work, and ultimately keeping it alive.

So let’s look at some pros and cons of this technique.

Pros

• When done properly, it’s a very stunning and memorable experience
• A powerful tool to guide users to Calls to Action
• Adds further engagement to a page making for longer page visits (user will want to experience it all and might even read the content in the process)
• Helps tell a story in a far more interesting way

Cons

• Parallax does not play well with responsive or mobile devices
• Page loads tend to be longer which can be an obstacle for some visitors
• Often parallax is used in one-pager sites so SEO concerns become an issue as you only have one set of metadata and one H1 (only one that will be taken seriously by the Search Engines)
• When not done properly the effects can be distracting and in some cases ruin the experience entirely.

How can use it properly then?

• Don’t put all your pages into one page… use the parallax page to launch to other pages within the site, creating content depth. This is helpful for SEO and the visitor.
• Use responsibly. All things are in moderation.
• For responsive and mobile, ensure you have proper fallbacks for smaller screens and different devices… yes we can do that nowadays.

In Conclusion

Use this effect – effectively, tell a story, or drive a user to a Call To Action. Don’t overuse or abuse it. Using parallax can be extremely effective, or very distracting.