True parallax with CSS-only is now possible

From the creator

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://teesp

Published 2023-11-02 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.