javascript - 滚动时将图像从灰度变为彩色

Question

我正在尝试制作一个动画，当我们向下滚动时，图像从灰度变为彩色，图像保持原位，直到它完全变成彩色，彩色部分的高度是滚动量，剩余部分是灰色。我尝试了以下代码，但在这里，图像立即变成了彩色。

可以使用的技巧之一是将灰度图像置于彩色图像之上，并更改我无法实现的灰度图像的高度。

const targets = document.querySelectorAll(".colored");
const isAnimated = "is-animated";
const threshold = 0.5;

function callback(entries, observer) {
  entries.forEach((entry) => {
    const elem = entry.target;
    if (entry.intersectionRatio >= threshold) {
      elem.classList.add(isAnimated);
      //observer.unobserve(elem);
    } else {
      elem.classList.remove(isAnimated);
    }
  });
}

const observer = new IntersectionObserver(callback, { threshold });
for (const target of targets) {
  observer.observe(target);
}

/* RESET RULES & HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --blue: #0a0c10;
  --gray: #ededed;
  --white: white;
  --red: red;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

body {
  font-size: 20px;
  font-family: sans-serif;
  text-align: center;
}

.cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.vh-100 {
  height: 100vh;
}

.hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section p {
  margin-top: 5px;
}

.hero-section,
.page-footer {
  color: var(--white);
  background: var(--blue);
}

.section h2 {
  font-size: 2.5rem;
  padding: 10vh;
}

.section h2 a {
  box-shadow: inset 0 -5px 0 var(--blue);
  transition: all 0.15s;
}

.section h2 a:hover {
  color: var(--white);
  box-shadow: inset 0 -45px 0 var(--blue);
}

.img-wrapper {
  display: grid;
}

.img-wrapper div {
  grid-column: 1;
  grid-row: 1;
}


/* CLIP-PATH STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.grayscale {
  filter: grayscale(1);
  background-color: var(--gray);
}

.colored {
  clip-path: inset(0 100% 0 0);
  transition: all 1.5s ease-in-out;
}

.colored[data-animation="to-left"] {
  clip-path: inset(0 0 0 100%);
}

.colored[data-animation="to-top"] {
  clip-path: inset(0 0 100% 0);
}

.colored[data-animation="to-bottom"] {
  clip-path: inset(100% 0 0 0);
}

.colored.is-animated {
  clip-path: inset(0);
}


/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  font-size: 18px;
  padding: 10vh;
}

.page-footer p + p {
  margin-top: 5px;
}

.page-footer span {
  color: var(--red);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<section class="hero-section vh-100">
  <div>
    <h1>Grayscale to Color Effect</h1>
    <p> Scroll down</p>
  </div>
</section>
<section class="section">
  <h2>by <a href="https://pixabay.com/el/users/mark_mook_fotografie-3466195" target="_blank">Mark Mook</a></h2>
  <div class="vh-100 img-wrapper">
    <div class="grayscale cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait1.jpg); background-position: top;"></div>
    <div class="colored cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait1.jpg); background-position: top;"></div>
  </div>
</section>
<section class="section">
  <h2>by <a href="https://pixabay.com/el/users/bessi-909086" target="_blank">Besi</a></h2>
  <div class="vh-100 img-wrapper">
    <div class="grayscale cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait2.jpg); background-position: top;"></div>
    <div class="colored cover" data-animation="to-left" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait2.jpg); background-position: top;"></div>
  </div>
</section>
<section class="section">
  <h2>by <a href="https://pixabay.com/el/users/nastya_gepp-3773230" target="_blank">Anastasia Gepp</a></h2>
  <div class="vh-100 img-wrapper">
    <div class="grayscale cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait3.jpg); background-position: top;"></div>
    <div class="colored cover" data-animation="to-bottom" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait3.jpg); background-position: top;"></div>
  </div>
</section>
<section class="section">
  <h2>by <a href="https://pixabay.com/el/users/doanme-4958892" target="_blank">Doris Metternich</a></h2>
  <div class="vh-100 img-wrapper">
    <div class="grayscale cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait4.jpg);"></div>
    <div class="colored cover" data-animation="to-top" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait4.jpg);"></div>
  </div>
</section>
<footer class="page-footer">
  <p>
    <small>Images from <a href="http://pixabay.com/" target="_blank">Pixabay</a>
    </small>
  </p>
  <p>
    <small>Made with <span>❤&lt;/span> by <a href="https://georgemartsoukos.com/" target="_blank">George Martsoukos</a>
    </small>
  </p>
</footer>

标签： javascripthtmlcssscrollgrayscale