True parallax with css-only

Key Takeaways

a true parallx effect using CSS only the first thing I've done is used a display grid and grid template areas to pile everything on top of each other that I want to Parallax and I'm also using position absolute just so I can make some small adjustments to the positioning of some of my different elements now the first step we're going to have to do is to have some key frames where you're translating along your Y axis once you have that in place let's start with just doing one of them I'm just going to add an animation with the name of my animation and make it linear and then the real magic is just the animation timeline of scroll having that in place you can see that the main character that's closest to us is scrolling at a different speed from everything else of course I could remove that from here and then move it to all of my elements that I want the trick here is in our key frames to use a calp to multiply or Translate Y by a custom property that we can use to control the speed then on all the individual elements I can assign them all their own speed then with all that in place you can see that we have all these different elements scrolling at different speeds as they're moving up and down and we get