Week 190 was posted by Charanjit Chana on 2021-06-14.
I need to dig into container queries and really see how they work, but it feels like CSS has come on so much in the past year that there's really only one thing left I'd like to see in CSS. Native parallax scrolling.
There are examples out there that show how you can achieve it by manipulating how close to the viewport the item is (as in pushing it back really far away from your screen), but when I've tried to simplify them they stop working. It feels more like a hack to me than the right way.
I came up with this idea the other day, a new property called scroll-offset that determines how your much an items movement is affected when you scroll:
Would love a property called something like ‘scroll-offset’ in #CSS to help us build elements that can have a parallax effect. My idea that you determine how much faster (or slower) a child element scrolls in relation to it’s parent.
View on twitter
On reflection, perhaps scroll-offset isn't the best term for the property, but I think it is basically what I'm after. The idea is that you take the parent element's offset and exaggerate it when applying it to the child element. You could go as far as halving it or doubling it.
If that doesn't explain it well, then here's a quick demo I put together on Codepen:
As you scroll, you'll see the left side scroll up twice as fast as the middle and the right side will be half the speed. All achieved with a couple of lines of JavaScript but this really feels like it should be native to CSS right now.
scroll-offset really only works for the content however, and it's dawned on me that we could also do with a background-offset property too so that we could do the same with background images.
Tags: css, development