Kevin Powell - CommunityKP-C
Kevin Powell - Communityโ€ข3y agoโ€ข
6 replies
Silvershot

CSS variable scoping when using animation

Watching Kevin's video (https://www.youtube.com/watch?v=Qj0Qx8HpNUo) on parallax had me wondering at 8:22. He goes ahead and uses the --parallax-speed variable, which is declared privately/locally in each of the .parallax's children. Each .parallex child also has an animation declared, which makes use of the @keyframes parallax animation. How does the @keyframes parallax animation scope have access to the --parallax-speed variable of every child?
YouTubeKevin Powell
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 on...
True parallax with CSS-only is now possible
Was this page helpful?