Jump to content

Background color change with scroll fall 2022 update

Recommended Posts

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!

Link to comment
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.

image.thumb.gif.261039b8d21e6b1441f6c1084fab2a8d.gif

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Ă—
Ă—
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.