Smoothly Transition to Change Background Color on Scroll

PEARLERwork · August 18, 2020

Site URL: https://locolove.com/

I'm hoping to get this background effect on my site, but I'm unsure how. Any ideas? https://locolove.com/pages/about-us

tuanphan · August 18, 2020

Can you share your site url?

sarahjohanna · August 18, 2020

Follow

PEARLERwork · August 27, 2020

Sure, it's chiton-coral-83de.squarespace.com and the password is "pearler". Thank you!

sarahjohanna · September 4, 2020

Did you solve this?

tuanphan · September 4, 2020

1 hour ago, sarahjohanna said:

Did you solve this?

They used this code

[data-section-id="5f473814f0f6cc540dfff7e5"] .section-background {
    background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;
    background-size: 400% !important;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-animation: Gradient 10s ease infinite !important;
    -moz-animation: Gradient 10s ease infinite !important;
    animation: Gradient 10s ease infinite !important;
}

Each section has different ID. Use this tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

whartonstudio · October 27, 2021

Hi everyone, when I try this code on a couple of sections in a website I'm just building the colour doesn't fade from one section to the next - instead there's a block of colour in one section and a block of colour in the next. Does anyone know how to overcome this please? Thanks so much!

RylanCzuczman · February 10, 2022

@whartonstudio did you ever get this working? I'm trying the same thing and not getting anywhere unfortunately.

PEARLERwork · March 7, 2022

@RylanCzuczman @whartonstudio @sarahjohanna Hey Guys, this is what I ended up using: https://www.will-myers.com/change-the-background-color-on-scroll-in-squarespace

Edited March 7, 2022 by pearler1570048501

Smoothly Transition to Change Background Color on Scroll

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources