Back to blog

What ever happened to parallax?

13 July 2020

There’s something that websites inherently lack that other mediums provide, and that’s three-dimensional depth. Even the simplest of platformer games implement depth to provide some form of feedback to the player – to show what’s nearby and important and what’s far away and just part of the scenery. Depth is a property of nature, and we as creatures that roam the Earth have evolved around it.

Train tracks are parallel, however due to depth they converge at the horizon – giving a sense of distance.

A key element of depth is parallax. Picture yourself on the tracks above, looking off to the horizon (assume there are no trains running, or this thought experiment would take a pretty nasty turn.) Now, imagine strafing to the left. It’s pretty clear what you would see – the nearest section of track would appear to move faster than the farthest section of track. Similarly, if you look out the window on a moving train the trees closest by move with more speed than the hills over two miles away. This is parallax.

Parallax is pretty cool, it can be used to measure the distance to the nearest stars.

What is parallax scrolling?

Simply put, parallax scrolling is a design implementation of the depth we just discussed. Information that is displayed in the background (images) scrolls slower than the important information displayed in the foreground (text). Of course, there can be multiple layers of complexity here – you could potentially have as many different elements on the screen at any one time scrolling at a different speed than the other.

A modern example of parallax scrolling. (Source: http://www.fsemeric.com/)

The question is, does parallax have any place in websites?

Parallax is so 2011

The whole “trend” of parallax scrolling took off in 2011 and was still going strong through 2014. Even to this day it is still used in some sites, however most of the old ones have been redesigned. Tracking down a site that uses parallax scrolling to its full extent is a surprisingly difficult today. (It took me an embarrassing amount of time to find the one sourced above!)

So, why is it no longer widely used?

The reasons for its outlaw can be placed into the following categories:

1. Accessibility

We live in an age of inclusion, where major design decisions are based off of things other than just “oh it looks pretty.” Over 2.2 billion people have some form of visual impairment. By ignoring basic accessibility guidelines we, as developers and designers, are alienating over 25% of the population and, by extension, potentially 25% of our visitors.

Parallax scrolling introduces a high risk of colour contrast issues. Your background images moving independently of your foreground text introduces the probability of two similar colours clashing in a way that hurts the eye, or is at least hard to read. Worst of all is you can’t necessarily fix this issue on all screen sizes as these key elements will be positioned differently across the wide range of display sizes.

Whilst we’re on the topic of positioning, the basic ability to tab through elements of a web page is impaired. The tab flow is supposed to make sense, however with a parallax scroll the elements you are tabbing across are physically moving as you navigate through them. This can confuse and frustrate your visitors. Not great.

My final point on accessibility is motion sickness. Yes, I know it sounds weird. How can you get motion sickness browsing a web page? Well, it turns out a lot of people can. It’s called cybersickness – and experts claim 50% to 80% of people are affected by it, depending on how the content they are viewing is delivered. One would imagine the upper band is applicable especially when parallax scrolling is involved. Focusing on elements becomes increasingly more difficult as there is an inconsistent separation between them.

2. Responsiveness

Parallax scrolling is not so compatible with mobile phones and, given that the percentage of people browsing the web on a mobile device versus a desktop is growing (in 2020, 56% of web traffic came from mobile/tablet devices) – we are yet again alienating over half of our visitors. One of the largest criticisms of the parallax scrolling effect is its poor performance on mobile devices. Parallax effects appear broken or choppy on mobile devices because mobile web browsers are designed to limit script execution upon scroll events.

So, the only work around really is to disable our parallax effect on mobile devices. The markup is often structured specifically for the parallax effect, so disabling it on small devices may turn out to be a much bigger task than simply “turning it off.” This is time consuming and down-right annoying. It doesn’t make much sense.

3. Resource intensive

This point goes more or less hand in hand with the one above. Everything involving computers requires.. well.. computation. When an event is triggered, such as scrolling the wheel, some computation occurs to produce a desired output – scrolling the web page. When you include depth in that computation, things can get pretty heavy.

To programmatically implement parallax scrolling, upon each scroll event we must first know some things about the states of our elements. Where they are currently positioned in relative space, and where the relative space is positioned in absolute space. When we scroll down on a website with parallax effects, we probably expect the background to scroll slower than the foreground. It’s not enough to just move the background more slowly than the foreground because the positions need to be reproducible should the user ‘snap’ to a certain scroll position. There needs to be some sort of algorithm running this effect.

Sure, most modern computers can run parallax scrolling without any hiccups. But even on your average modern computer, the page load time is going to be significantly slower than that of a static website. New research by Google has found that 53% of website visitors will leave if a webpage doesn’t load within three seconds. That’s not much time to serve up a fully rendered web page before your potential visitor leaves your site and never comes back. Are you willing to gamble away your visitors for a visual gimmick?

4. Search Engine Optimisation

My final point is that thing we probably should be doing a lot more of, but often skimp on. SEO.

Quite often parallax websites are just one page. Their major design choice was a fun visual effect that does, arguably, tell a story through the user’s journey down the page. So why bother creating multiple pages, which ultimately makes what would otherwise by just one page smaller, and only serves to reduce this cool visual journey?

If your entire website is just one big page, your SEO is going to diminish. Pretty badly. The H1 tag is supposed to be used just once per page, so you only get to use that once, which means you’re also nuking your ability to put in a few extra H2’s and H3’s.

Search engines like to see websites that serve up multiple content-rich pages to their users, they like to see sitemaps, sensible URL permalink structure, they like to index pages within a site by their keywords to be able to deliver the correct page based on the search criteria.

None of this is truly possible if your entire site is just one or two big pages. Parallax encourages this bad behaviour.

The verdict

Parallax was a trend that spiked in 2014 and has since practically died out – for good reasons. Whilst parallax scrolling allows us to create beautiful websites with depth and visual storytelling, it doesn’t necessarily make our UX any better (in fact, it can certainly hinder UX).

Everything that parallax scrolling achieves design-wise can be achieved through more thoughtful design approaches. The depth we get with parallax can be brought out through a well thought-out colour scheme, with font sizes that make sense. Yes, parallax is pretty cool, but it seems to be have more down-sides than up-sides. User engagement isn’t just about cool visual gimmicks, it’s about tapping into your visitor’s intuition and delivering them content in a format that makes visual sense.