0

如何像这样 Amanda Braga Portfolio在 Scroll 上平滑更改页面颜色

<!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>

这里我们可以添加改变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>
4

2 回答 2

1

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

这是代码以防有人需要

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);
于 2021-02-13T12:17:04.523 回答
1

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

使用 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>

于 2021-01-05T22:36:11.177 回答