Dynamically change the background color based on scroll position

[duo]

I’m looking for the easiest solution to smoothly transition the background color of my page based on where the scroll position is.

Use www.snappy.com as an example. See how the page transition for blue to lighter blue to white as you scroll down the page.

Any help is appreciated. Thanks!

[maddy]

Hi @duo,

One way to achieve this in Builder would be:

1. Add as many sections as you need to your Builder page and give each section a width of 100vw and a height of 100vh.

2. Select each section → open the styles tab → scroll down to the element attributes. In this section select “+ add new” and add “data-bg” as the property and the color you would like for that section. Below the element attributes section, give each section the same class name (e.g. section) in the CSS classes section.

3. Now you’ll need to add custom code to make the background color change as you scroll the page. In the content JS + CSS section of the data tab, add this code:

if (Builder.isBrowser) {
    window.sections = [...document.querySelectorAll('.section')];
    window.lastScrollTop = window.pageYOffset;
    document.body.style.background = window.sections[0].getAttribute('data-bg');
    window.addEventListener('scroll', throttle(onScroll, 100));

    function throttle(fn, wait) {
      var time = Date.now();
      return function() {
        if ((time + wait - Date.now()) < 0) {
          fn();
          time = Date.now();
        }
      }
    }

function onScroll() {
  const scrollTop = window.pageYOffset;
  
  const section = window.sections
    .map(section => {
      const el = section;
      const rect = el.getBoundingClientRect();
      return {el, rect};
    })
    .find(section => section.rect.bottom >= (window.innerHeight * 0.5));
  document.body.style.background = section.el.getAttribute('data-bg');
}
  }
}
  }
}

Here is a fiddle example. This is just one option on how to achieve this, you can see another example of how to achieve this here.