Change background and color hue when scrolling in different page sections

Hey all, I'm trying to achieve this effect and thought to ask here if you know the way

https://ghostpluginssuper.squarespace.com/huey-page-sections/?password=ghost

Thank you

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>

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!