0

I'm trying to have the background of each section change when you scroll through (using locomotive-scroll) and i used this response which works up to a point, but doesn't change back when i move to the previous section. Any idea how to get this effect thanks. Here is a link to the website I saw that does it beautifully Example Use https://stackoverflow.com/a/66184996/14719899

<div class="body locomotive-scroll" data-scroll-container>
 <div data-scroll-section>
  <section id="landing-page" data-scroll data-scroll-repeat data-scroll-call="pageColor" data-scroll-id="data-scroll-landing-page" data-scroll-id="black">
   some content
  </section>
 <div>

 <div data-scroll-section>
  <section id="landing-page" data-scroll data-scroll-repeat data-scroll-call="pageColor" data-scroll-id="data-scroll-landing-page" data-scroll-id="white">
   some content
  </section>
 <div>

 <div data-scroll-section>
  <section id="landing-page" data-scroll data-scroll-repeat data-scroll-call="pageColor" data-scroll-id="data-scroll-landing-page" data-scroll-id="black">
   some content
  </section>
 <div>
</div>

<!-- Locomotive Scroll -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.1/dist/locomotive-scroll.min.js"></script>

<script>
 const locoScroll = new LocomotiveScroll({
  el: document.querySelector(".locomotive-scroll"),
  smooth: true,
  smartphone: {
   smooth: true
  },
  tablet: {
   smooth: true
  },
  smoothMobile: 0,
  multiplier: 1.0,
  }); 

//BACKGROUND COLOR CHANGE AS SCROLL
 locoScroll.on('call', (value, way, obj) => {
  if (way === 'enter') {
   switch (value) {
    case "pageColor":
     // get color code from data-scroll-id  assigned to body by obj.id
     document.querySelector('body').style.backgroundColor = obj.id;
    break;
   }
  }
 });

</script>
Tubestorm
  • 1
  • 4

0 Answers0