如何在滚动图像时将文本颜色从黑色更改为白色

Question

我正在建立一个包含大量图片的网站。在侧边栏上是一个文本（它保持在位置：粘性），我希望它在向下滚动网页时重叠它通过的图像时将其颜色从黑色更改为白色。我该怎么做？

我找到了一个 Codepen 示例，正是这样做的。但是提取请求的代码很复杂，因为 Javascript 还处理滚动动画。 https://codepen.io/Atise/pen/WNOmyxY

我的 sidenav 功能如下：https://codepen.io/clairecodes/pen/bvWKdr

尽管如此t：这种方法的问题在于它在垂直滚动其长度时无法在普通网站上运行。仅当导航栏接近时，白色文本才应可见。为了实现这一点，图像需要有一些触发器，仅在导航栏接近时才显示文本 (.section-title.on-dark)。

<div class="outer-container">
    <div class="image-container" style="background-image: url('https://images.unsplash.com/photo-1570528812862-9984124e7e22?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
    
    <style>
      body {
     margin: 0;
     min-height: 3000px;
     font-family: 'Montserrat', sans-serif;
}
 .outer-container {
     max-width: 600px;
     margin: auto;
     width: 90%;
     padding: 200px 0px;
     position: relative;
}
 .image-container {
     padding-bottom: 100%;
     background: black;
     position: relative;
     overflow: hidden;
     z-index: 2;
     background-size: cover;
     background-position: center;
}
 .section-title {
     margin: 0;
     font-size: 64px;
     width: 100%;
     text-align: center;
     position: absolute;
     top: 50%;
     left: -30%;
     transform: translateY(-50%);
     z-index: 1;
     white-space: nowrap;
}
 .section-title.on-dark {
     color: white;
}
 .section-title span {
     position: relative;
     display: block;
}
    </style>
    
        <h2 class="section-title on-dark">
            <span class="paralax-title">
                Live The Adventure
            </span>
        </h2>
    </div>
    
    <h2 class="section-title">
        <span class="paralax-title">
            Live The Adventure
        </span>
    </h2>
</div>

    <script>
      let didScroll = false;
let paralaxTitles = document.querySelectorAll('.paralax-title');

const scrollInProgress = () => {
    didScroll = true
}
const raf = () => {
    if(didScroll) {
        paralaxTitles.forEach((element, index) => {
            element.style.transform = "translateX("+ window.scrollY / 10 + "%)"
        })
        didScroll = false;
    }
    requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
window.addEventListener('scroll', scrollInProgress)
    </script>

Answer 1

您可能正在寻找mix-blend-mode。

.bg {
  width: 200vw;
  height: 200vh;
  background-image: url(https://images.pexels.com/photos/7718429/pexels-photo-7718429.jpeg);
  background-size: cover;
}

.text {
  margin: 0;
  font-size: 50px;
  position: fixed;
  color: white;
  mix-blend-mode: difference;
}

<div class="bg">
  <h1 class="text">Lorem Ipsum</h1>
</div>

还有difference 以外的值。阅读MDN Docs 并找到最适合您网站的价值。