Jump to content

Change background and color hue when scrolling in different page sections

Recommended Posts

  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic


Ghost Plugins is pretty legit, if you have the $20.00, I'd recommend purchasing the plugin. If you're familiar with Javascript, the animation is controlled based on the distance or presence of a section in the view-port. We can't really demo custom scripts on your website without developer access. If you really want to do this on your own. This code should be a good reference 😄

const colors = ["", "lightCyan", "darkSkyBlue", "aquamarine", "electricBlue"];

const sections = [...document.querySelectorAll(".page-section")];

window.addEventListener("scroll", function () {
  const scrollFromTop = window.pageYOffset;

  for (let i = 0; sections.length > i; i++) {
    if (scrollFromTop <= sections[i].offsetTop) {
      document.body.className = colors[i];


Link to comment

Thank you, I wouldn't mind to spend $20 ofc, but this has no one-time purchase. 

You should be subscribed on a monthly plan and the code is going to work only for as long as you stay subscribed.


Will explore what you wrote soon, many thanks!

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.