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 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).