Smooth scrolling gradient change

Site URL: https://lucyelliott.co.uk

Hello!

I'm trying to give one page (either a single blank page or an index containing sections - whichever is easier to do) on my site a scrolling gradient background as seen at https://locolove.com/ or https://www.wildernessfestival.com/2021-line-up/. Found various codes around the place but no luck getting them to work on my developer mode squarespace site, my actual site is V7 Brine family template.

Any help appreciated!

On 7/2/2021 at 7:55 PM, imlucyelliott said:

Site URL: https://lucyelliott.co.uk

Hello!

I'm trying to give one page (either a single blank page or an index containing sections - whichever is easier to do) on my site a scrolling gradient background as seen at https://locolove.com/ or https://www.wildernessfestival.com/2021-line-up/. Found various codes around the place but no luck getting them to work on my developer mode squarespace site, my actual site is V7 Brine family template.

Any help appreciated!

Try if that help, you can find the correct collection id and replace accordingly

Chrome Web Store - Extensions (google.com)

#collection-5f3f9568da33df0d062c9e80 .Index-page {
  background-color: transparent;
}
#collection-5f3f9568da33df0d062c9e80 .Index {
      background: #292b30;
      background: linear-gradient(
  -45deg
  , #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      -webkit-animation: gradient 15s ease infinite;
      animation: gradient 15s ease infinite;
}
@-webkit-keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

You are an absolute genius @bangank36! This works perfectly, thanks for brightening my week!

Just one question - this code works perfectly on my homepage, but no other page. I've tried changing the collection ID but that doesn't seem to do anything. Do I need to alter the code for other pages of my site?

21 hours ago, imlucyelliott said:

Just one question - this code works perfectly on my homepage, but no other page. I've tried changing the collection ID but that doesn't seem to do anything. Do I need to alter the code for other pages of my site?

 

With other pages, try this code

body .Main {
  background-color: transparent;
}
body {
      background: #292b30;
      background: linear-gradient(
  -45deg
  , #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      -webkit-animation: gradient 15s ease infinite;
      animation: gradient 15s ease infinite;
}
@-webkit-keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

On 7/4/2021 at 10:53 AM, bangank36 said:

Try if that help, you can find the correct collection id and replace accordingly

Chrome Web Store - Extensions (google.com)

#collection-5f3f9568da33df0d062c9e80 .Index-page {
  background-color: transparent;
}
#collection-5f3f9568da33df0d062c9e80 .Index {
      background: #292b30;
      background: linear-gradient(
  -45deg
  , #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      -webkit-animation: gradient 15s ease infinite;
      animation: gradient 15s ease infinite;
}
@-webkit-keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

Hey Legend, im trying to do exactly the same, but the code its not working, i changed the Id collection, but nothing, im with the new version of squarespace, do you think that can be the issue? thank you!!

@tuanphan I added this code to one of my sites and it worked great until I upgraded to Fluid Engine. The code no longer works and when I go into my Circle Lab settings to opt-out of the Fluid Engine (in hopes to reverse this) the scrolling gradient still doesnt work. Any ideas?