Considerations for using parallax effects on websites
Tips, examples, and resources to help make your website accessible
Parallax is a popular effect in web design. It can make your website’s visitors feel immersed in the page content or call attention to specific aspects of a page’s design. Although not a new effect, parallax is making a comeback and has been used in web designs for some of today’s top brands.
However, this effect can create a number of usability issues. From causing nausea and dizziness to longer load times to a less than satisfying user experience, parallax can come at a cost and should be used sparingly.
Here is a brief overview of parallax, its limitations, and tips for incorporating it into your design.
What is parallax?
The parallax animation effect is created by two or more layers of an interface moving at different speeds or in different directions in order to produce an impression of depth.
Reasons for using it
- This scrolling technique creates the illusion of depth on a webpage by making the background images move slower than the foreground images.
- Engages users with a website and is intended to improve the user experience.
- Give users the sense of being “immersed” in the webpage’s content.
- Call attention to certain page elements.
Limitations
- Too much movement may cause people to experience nausea. As many as 35 percent of people over the age of 40 are likely to experience nauseous when looking at websites that rely on parallax scrolling.
- Contrast issues can arise if parts of your text go over different colored backgrounds where the color of the text and the color of the background do not create enough contrast for words to be legible.
- Parallax-presented content can be difficult to control and cause pages to take longer to load.
- It can create nonsensical interactions.
- It isn’t mobile-friendly.
Tips for using parallax
When incorporating parallax scrolling and animation in your webpage, here are some tips to consider:
- Parallax is safest in environments where users are browsing for leisure, without a specific goal or task in mind.
- Save parallax effects for background or peripheral images, so that they are easy to ignore and don’t detract from the content.
- Use anchor links to take users directly to the content they want and allow them to avoid the parallax effects on the webpage.
- Create separate pages for mobile or optimize your page for mobile usability.
A few examples
- Restaurant Le Duc (Link)
- Apple Ipad Pro (Link)
- Cyclemon (Link)
- Fluttuo (Link)
- Hot Dot(Link)
- Immersive Gardens (Link)
- NASA: Prospect (Link)
- Projects: bearides (Link)
- Unfold.no (Link)
Additional Resources
- Usability Best Practices for Parallax Scrolling (Link)
- Beginner’s guide to prototyping parallax websites (Link)
- Using Parallax Scrolling in Web Design (Link)
- Parallax Scrolling Websites and SEO — A Collection of Solutions and Examples (Link)
- 25 beautiful parallax scrolling websites (and how to create one) (Link)
- What is Parallax Scrolling and How Can It Be Used? (Link)
- What Parallax Lacks (Link)
- The Hypnotic Effect of Parallax Scrolling and How it Impacts User Experience (Link)
- 31 Best Parallax Websites To Inspire You in 2019 (Link)
— By Jesse Summers and Alyssa Hinojosa
