Thoughts on parallax scrolling
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?
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.
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.
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