javascript - 上下滚动时淡入淡出

Question

我想扩展此答案中提供的代码。那里的代码在向下滚动时淡入元素，在向上滚动时淡出图像，但在向下滚动时不会淡出。我想实现所有元素：向下滚动时淡入，元素离开视口时淡出，向上滚动时淡入，元素离开视口时淡出。

标签： javascripthtmljquerycss

Answer 1

您可以使用Intersection Observer API来实现所需的结果，jQuery而不是使用事件侦听器。scroll

您可以根据需要调整threshold选项。IntersectionObserver此选项用于指示应执行观察者回调的目标可见性百分比。我已将其设置为 70%。

const observerOptions = {
  root: null,
  rootMargin: "0px",
  threshold: 0.7
};

function observerCallback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // fade in observed elements that are in view
      entry.target.classList.replace('fadeOut', 'fadeIn');
    } else {
      // fade out observed elements that are not in view
      entry.target.classList.replace('fadeIn', 'fadeOut');
    }
  });
}

const observer = new IntersectionObserver(observerCallback, observerOptions);

const fadeElms = document.querySelectorAll('.fade');
fadeElms.forEach(el => observer.observe(el));

.fade {
  margin: 50px;
  padding: 50px;
  background-color: lightgreen;
  transition: opacity 0.7s ease-in;
}

.fadeOut { opacity: 0; }
.fadeIn { opacity: 1; }

<div class="container">
  <div class="fade fadeOut">Element 1</div>
  <div class="fade fadeOut">Element 2</div>
  <div class="fade fadeOut">Element 3</div>
  <div class="fade fadeOut">Element 4</div>
  <div class="fade fadeOut">Element 5</div>
  <div class="fade fadeOut">Element 6</div>
  <div class="fade fadeOut">Element 7</div>
  <div class="fade fadeOut">Element 8</div>
  <div class="fade fadeOut">Element 9</div>
  <div class="fade fadeOut">Element 10</div>
</div>