True parallax with CSS-only is now possible

Video Description

https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=cssparallax 👈 Interested in levelling up your CSS game? I’ve got courses! 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. 🔗 Links ✅ The original site: https://moco.supercell.com/en/ ✅ The polyfill: https://github.com/flackr/scroll-timeline ✅ Web Dev Simplified’s video: https://www.youtube.com/watch?v=mxHoPYFsTuk ✅ The code from this video: https://github.com/kevin-powell/css-parallax ⌚ 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 #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome 💖 Support me on Patreon: https://www.patreon.com/kevinpowell --- My editor: VS Code - https://code.visualstudio.com/ --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!