Background color change with scroll fall 2022 update

Site URL: https://www.squarespace.com/refresh/2022?channel=email&subchannel=announcement-email%20&source=2022-refresh&campaign=all&utm_medium=email&utm_source=2022-refresh&utm_campaign=all&utm_term=announcement-email%20&subcampaign=en&utm_content=en

Hi all! I just got an email from squarespace showing off their new features and one think i really liked was that as I scrolled down, the background automatically changed from beige to green to blue to black. Not gradients, more like brief automatic fade. You'll know what I mean if you click the link I provided.

In googling this, it sounds like there were code based things that could be done to make gradients within blocks (not what i wanted) and other changes, but I haven't seen the code for this specifically. I'm actually really hoping that with this update that it's not code based at all, and just a setting, but I went exploring and couldn't find anything.

If you wouldn't mind taking a look at that link and then helping me out I'd really appreciate that, it's such a cool look! Thanks!

17 hours ago, KatherineS said:

the background automatically changed from beige to green to blue to black. Not gradients, more like brief automatic fade.

I'm actually really hoping that with this update that it's not code based at all, and just a setting.

As usual, this isn't a new feature 🙂. It's the Squarespace designers showing off what they can do with the Developer Platform. They change the data-section-index of the section background div as the user scrolls through the sections. Each data-section-index is configured with a different background-color in CSS (yellow, blue and green) and there's a CSS transition to smooth the colour change.

You don't need to use Developer Mode to do this, but you'll need to know some JavaScript and CSS. The exact code will vary according to the page size, colours and so on, but you'd typically use the same principles as described above.

Sooo, what's the code used in the site reference given so that non-expert coders have a place to start from? Thanks for your help here I've been trying to figure this out for awhile now.