Thoughts on parallax scrolling

Above: everylastdrop.co.uk

We’ve all seen them and they were actually really cool! Two years ago. Parallax websites, one page websites, images popping from here and there, scrolling until your middle finger hurts. In the best cases they are pretty attractive and eye-catching, especially if we’re speaking about presenting information visually, but my personal opinion is that unfortunately most of them just ended up being confusing for the average user and not so pretty or not working at all on mobile. Why?

Well, lets see how does parallax scrolling work at first place. There are a few ways to create the effect, one is using css only, other is using javascript.

CSS

Most css only solutions are using position:fixed or background-attachment:fixed in order to achieve the look. This is a pretty good solution if you only need to add a single parallax “gap” on a page for example but how about more complex needs? Nope. background-attachment: fixed is leading the browser to much more painting which may cause glitches and not so pretty scrolling in some browsers with more elements. Does this work on mobile? Not even close.

The best css only solution I’ve seen so far (or probably the best solution at all) is using 3D transforms for the parallax effect ( by Keith Clark, here). This is a great solution that works perfectly both on desktop and mobile (wohoo, magic!),  the scrolling is perfectly smooth and is easy to implement. The cons is it is not widely supported (Won’t work on IE at all, has problems with Firefox) so you’ll still need to disable the parallax scrolling on those.

JS

How about javascript? Sounds like a good plan, you’ll only need to listen for the scroll event and change the element’s properties based by it. Why is it bad? First, this can make the page load really slow or it may not work smoothly on all browsers. It also triggers unnecessary repaints which may again cause glitches and “funny” behavior. Does it work on mobile? Nope. On some android devices it might actually work but forget about iOS. Mobile browsers are delaying the execution of javascrips while the user is scrolling (iOS completely stops javascript) and are adding them to a queue after the scrolling is done. That’s why it’s a very bad idea to attach handlers to the window scroll event. ( Good news is that from iOS8 JavaScript is allowed while scrolling).

This means that you’ll either need to completely disable the effect on mobile devices or you’ll need to find a workaround and implement your custom scroll mechanism, completely ignoring the default one. That’s how the skrollr plugin works for example – when detecting a mobile browser, skrollr disables native scrolling and instead listens for touch events and moves the content using CSS transforms. It’s great and it works everywhere. The bad thing is that again you’re using elements with fixed positions and you’ll need to place them outside the skrollr-body div, which will completely change your html layout.

Wrapping up:

I’ve seen that, while speaking about pros and cons of parallax, most people are actually confusing one page website design with parallax effect. They are very often used together but parallax design is NOT one page design. This article is about parallax design only.

So… In my opinion parallax scrolling is not the best option for average use. You need to be really careful while implementing it and also need to be sure that this is the right feature for your website or you may end up in the big list of parallax scrolling failures. In most cases you’ll need to either disable the effect on mobile devices or some browsers or optimize the code for them (or both).

The best solutions for parallax scrolling I’ve found so far are:

JS – skrollr plugin

CSS – Keith Clark’s 3d transforms method