Jump to content

Change background and color hue when scrolling in different page sections

Recommended Posts

  • Replies 2
  • Views 488
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Hi,

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 😄

<script>
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];
      break;
    }
  }
});
</script>

 

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.