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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 6 months later...
  • 1 year later...
Posted (edited)

@camerondaft & @KatherineS,you don’t need to use custom code if you have SquareKicker. 
 

You can use SquareKicker’s Scrolling Effects to do this by setting up a “Shape Block” as your custom background color and then “on scroll, fade-in the new Shape Block Color. 

You can see that here in a Instagram post but also watch the Scrolling Effects Tutorials to learn more. 
 

 

Edited by Nick_SquareKicker

SquareKickerHi, I'm Nick, CEO & Co-Founder at squarekicker.com.  Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. 

Squarespace Extension  ●  Templates  ●  News  ●  Inspiration  ●  Tutorials  ●  Resources

 

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.