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:
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.
|More from 1 Thing A Week|
|« HEX, RGB, and HSL colors in CSS||Launching SITEJOY, a gallery of fast & responsive websites||Update 2 for SkeletonCSS »|