如何仅在页面滚动时进入视口时才对元素进行动画处理？

在页面滚动的视口中为元素添加动画

在包含多个动画元素的网页中，控制这些动画何时开始可能会很困难。为了实现平滑的滚动动画，我们需要一种方法，仅当它们各自的元素进入视图时才触发它们。以下是使用 IntersectionObserver API 实现此目的的方法。

使用 IntersectionObserver API

IntersectionObserver API 监视与视口或指定父元素相关的元素的可见性。当元素变得可见时，我们可以使用它来切换 CSS 动画。

代码片段

const inViewport = (entries, observer) => {
  entries.forEach((entry) => {
    entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
  });
};

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

// Attach observer to every [data-inviewport] element:
document.querySelectorAll('[data-inviewport]').forEach((el) => {
  Obs.observe(el, obsOptions);
});

CSS 动画示例

以下是如何将动画应用于元素的示例视图中的内容：

[data-inviewport] { /* THIS DEMO ONLY */
  width:100px; height:100px; background:#0bf; margin: 150vh 0; 
}

/* inViewport */

[data-inviewport="scale-in"] { 
  transition: 2s;
  transform: scale(0.1);
}
[data-inviewport="scale-in"].is-inViewport { 
  transform: scale(1);
}

[data-inviewport="fade-rotate"] { 
  transition: 2s;
  opacity: 0;
}
[data-inviewport="fade-rotate"].is-inViewport { 
  transform: rotate(180deg);
  opacity: 1;
}

结论

通过利用 IntersectionObserver API，我们现在可以控制动画的时间，确保动画在相应元素在视口中可见时播放。这种方法在用户滚动浏览您的网页时为他们提供了无缝且引人入胜的体验。

以上是如何仅在页面滚动时进入视口时才对元素进行动画处理？的详细内容。更多信息请关注PHP中文网其他相关文章！