问:如何才能仅当元素在滚动时在视口中可见时才在网页上显示动画?
答:要实现此目的,您可以使用 IntersectionObserver 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中文网其他相关文章!