Parallax effects can be cool, but I’m always told the CSS-only solutions aren’t “true” parallax. Well, thanks to scroll-timeline: scroll(), we can now create true parallax effects without one line of JS and have complete control over the speed of each layer.

⌚ Timestamps 00:00 - Introduction 01:10 - How we need to set up our HTML 02:45 - Stacking everything with CSS 04:45 - Creating the animation for the parallax 05:44 - Applying the animation to when the user scrolls with animation-timeline scroll() 08:00 - Changing the “speed” of each element 12:15 - Making sure the elements don’t go in front of other content 13:40 - Overflow hidden doesn’t work 15:08 - Browser support and a polyfill