True parallax with CSS-only is now possible

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

🔗 Links
✅ The original site: https://moco.supercell.com/en/ 
✅ The polyfill: https://github.com/flackr/scroll-timeline 
✅ The code from this video: https://github.com/kevin-powell/css-parallax 

#css