Short Bytes: Parallax Scrolling Effect is an effective way to be bold, and defined on the web pages, especially if it’s a branding or one big product page that shows the different features of it. But it’s mostly done very wrong using Javascript. This post will shine light on the correct and performant parts of doing it purely by CSS.
All of us have experienced, at some point of our internet surfing, this buggy sort, of parallax scrolling effect used on a web page. If you don’t see the problem right away (like really you couldn’t? I’m sure you did), let me tell you. Go back on the web page and see how janky the scrolling is. At least for me, and it is now widely accepted as a best practice, one should not use scroll hijacking, because it’s a bad user experience + it makes a fool out of the user who expects the page to scroll in a normal fashion. For example, in the link above, the user has to scroll more than what is the default behaviour of scroll, not worth the effort of the fingers, do you agree?
Or sometimes I just scroll a little, and the scroll position changes drastically, like on Tumblr’s home page. I do not like this experience, but some would argue that it’s okay in this use case. Opinions change over time, likability changes, perhaps mine will, perhaps mine won’t, for now it’s it.
Sacha Greif, the creator of sidebar.io, which is an awesome design article companion like The Hacker News, revamped his portfolio website recently and at the footer of the website, specifically added —
“Guaranteed 100% Scroll-Hijacking-free.”
What is a good example of a parallax effect then? This. See how smooth it is? What’s different here?
Let me take a step back, why use parallax scrolling effect at all? Because it can add depth and subtlety to the web page, which is amazing for landing product pages or market growth hack pages sort of stuff.
What people do wrong while making a parallax scrolling effect:
- Use scroll events (and hijack them) or background-position CSS property to create parallax animations.
What one should do?
- Use CSS 3D transforms to create a more accurate parallax effect.
- For Mobile Safari use position: sticky to ensure that the parallax effect gets propagated.
Problems with the Wrong Approaches:
Using scroll events:
The vital requirement of parallax behavior is that it should be scroll-coupled; that is, for any change in the scroll position of the page, the parallaxing element’s position should update as well. Browsers work asynchronously. So? So, in most browsers scroll events are delivered as “best effort” and one couldn’t guarantee that they would be delivered on every frame of the scroll animation.
This very fact tells us why one shouldn’t use Javascript based solution that couples elements’ movements on the page with scroll events. If the main Javascript thread is busy with some other work, scroll events wouldn’t get delivered immediately, meaning that parallax behavior will be lost, since a parallaxing element needs to reflect it immediately.
Javascript doesn’t guarantee that parallax behavior will keep in step with the page’s scroll position.
This is the reason for the janky, rusty, dirty animation example I gave at the starting. Using scroll events triggers unnecessary reflows and paints.
Updating Background Position:
This is not good because it causes the browser to repaint the affected parts of the page on scroll and that can be very costly to jank the page.
THE RIGHT WAY TO GET PARALLAX SCROLLING EFFECT: CSS ONLY
If we want to make a smooth jank free parallax motion, we need to use something that is a hardware accelerated property (which today means using transforms and opacity).
Parallax scrolling effect can essentially be created using 3D Transforms, taking advantage of the perspective CSS property.
Point being — one positions different elements (slides if you will) in and out of the viewport in the z-axis and scales them according to if they are placed in +z or -z direction.
Try this awesome debug option, of a demo created by Keith Clark, which will help you understand more of what I just talked about.
To go crazy on performance and cross-browser compatibility read this Performant Parallaxing guide by the awesome Google’s Paul Lewis (a.k.a @aerotwist).
