首页 >web前端 >css教程 >如何仅当元素位于视口中时才对元素进行动画处理?

如何仅当元素位于视口中时才对元素进行动画处理?

Barbara Streisand
Barbara Streisand原创
2024-11-20 13:12:13251浏览

How to Animate Elements Only When They're in Viewport?

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

问:如何才能仅当元素在滚动时在视口中可见时才在网页上显示动画?

答:要实现此目的,您可以使用 IntersectionObserver API。

Intersection Observer API

Intersection Observer API 允许您观察元素与其父元素或元素之间的交集。视口。它使您能够根据元素在视口中是否可见来触发事件。

以下是使用 API 切换可用于触发动画的类的示例:

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

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {};

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

然后,您可以使用“is-inViewport”类向元素添加 CSS 过渡或动画,以便在它们出现在视口中时为其设置动画。例如:

[data-inviewport] {
  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;
}

使用此代码,具有 [data-inviewport] 属性的元素将具有 CSS 过渡。当他们进入视口时,将添加 is-inViewport 类来触发动画。

以上是如何仅当元素位于视口中时才对元素进行动画处理?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn