Jump to content

Smooth scrolling gradient change

Recommended Posts

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!

Link to comment
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%;
	}
}

image.thumb.png.b646f8ee06a51f26413f16a79ca1d823.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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%;
	}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 10 months later...
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%;
	}
}

image.thumb.png.b646f8ee06a51f26413f16a79ca1d823.png

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!!

Link to comment
  • 5 months later...

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.