1 Thing A Week 1 Thing
A Week

Now that we have container queries, can we get native parallax scrolling please?

Week 190.0 — 14th June '21

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:

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.

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 »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 190.2 – Tuesday
    1. Wireframe Deck   $45+ Eric Miller on kickstarter.com
  2. 190.3 – Wednesday
    1. Emroided Forests kottke.org
  3. 190.4 – Thursday
    1. Alien Visitors xkcd.com
    2. NightWatch   $49.99 blessthisstuff.com
    3. The beauty of the Earth from orbit theatlantic.com
  4. 190.5 – Friday
    1. Opinion | Magneto: These new 'magnetic' vaccine mutants are extremely disappointing Alexandra Petri on washingtonpost.com
    2. "The Shrink Next Door" teaser trailer Apple TV on youtube.com
  5. 190.6 – Saturday
    1. Muslim misrepresentation in film Riz Ahmed on youtube.com

Jump to notable items for Week #189, Week #191 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit