使用机车滚动更改滚动页面颜色

Question

如何像这样在滚动时平滑地更改页面颜色 Amanda Braga Portfolio

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dpk</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.6.1/dist/locomotive-scroll.min.css">

</head>

<body>

    <div data-scroll-container>
        <section data-scroll-section>
            <div class="container Blue"></div>
            <div class="container Red"></div>
            <div class="container Black"></div>
        </section>
    </div>

Here we can add Methods for changing Pagecolor

<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.6.1/dist/locomotive-scroll.min.js"></script>
    <script>
        const scroll = new LocomotiveScroll({
            el: document.querySelector('[data-scroll-container]'),
            smooth: true
        });
    </script>
</body>

</html>

Answer 1

您需要为每个部分指定一个“id”，否则您仍然可以使用 class。使用机车滚动事件触发器来检测该部分何时在视图中并为其赋予颜色。

演示使用 jquery。

const scroller = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
})

scroller.on('scroll', () => {
  sectionBgChange();
})


function sectionBgChange() {
  let firstSection = $('#yellow').offset().top;
  let secondSection = $('#blue').offset().top;
  let thirdSection = $('#red').offset().top;

  var scrollPos = $(document).scrollTop();
  if (scrollPos >= firstSection && scrollPos < secondSection) {
    $('#yellow').css('background-color', 'yellow');
  } else if (scrollPos >= secondSection && scrollPos < thirdSection) {
    $('#blue').css('background-color', 'blue');
  } else if (scrollPos >= thirdSection) {
    $('#red').css('background-color', 'red');
  } else {
    $('section').css('background-color', 'white');
  }
}

main {
  padding: 20px;
  background: #f2f2f2;
}

section {
  padding: 100px;
  margin: 10px 0;
  height: 50vh;
  z-index: 1;
  border: 1px solid #eaeaea;
  display: grid;
  place-content: center;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: bold;
  background-color: white;
  box-shadow: 0 2px 12px 0px rgba(0, 0, 0, 0.25);
  position: relative;
  border-radius: .5rem;
}

section::before {
  content: attr(data-section);
}

<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main data-scroll-container>
  <section data-section="Yellow" data-scroll-section id="yellow"></section>
  <section data-section="Blue" data-scroll-section id="blue"></section>
  <section data-section="Red" data-scroll-section id="red"></section>
</main>

Answer 2

最后，我找到了一个更好的方法来实现这个

这是代码以备不时之需

HTML -

       <div class="vh-100">
            <span data-scroll data-scroll-repeat data-scroll-call="pageColor" 
             data-scroll-id="blue"> ____________blue  </span>
       </div>

       <div class="vh-100">
            <span data-scroll data-scroll-repeat data-scroll-call="pageColor" 
             data-scroll-id="green"> ____________green  </span>
       </div>

       <div class="vh-100">
            <span data-scroll data-scroll-repeat data-scroll-call="pageColor" 
             data-scroll-id="#ff0000"> ____________red  </span>
       </div>

CSS -（平滑过渡）

body{   
 transition: background-color 1s ease;
 }
 .vh-100{
   height:100vh;
  }

JS -（从 html 元素的 data-scroll-id 属性中获取颜色代码或颜色名称，并将其分配给正文背景颜色）

  setTimeout(() => {
    scroll.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;      
       }
      }

    });
  }, 800);

使用机车滚动更改滚动页面颜色

Change Page Color On Scroll Using Locomotive Scroll

javascript

html

css

locomotive-scroll