js如何用IntersectionObserver实现屏幕滚动触发动画效果

之前做一个项目的时候，需要实现屏幕滚动触发动画效果。因为是面向csdn编程，所以直接搜索。大部分结果是使用scroll事件监听页面的滚动，根据当前滚动位置来判断是否触发动画。但是实际测试这种方式在移动端不好使，有严重的兼容性问题。更为稳妥的办法是使用IntersectionObserver。

这是一个实例

使用IntersectionObserver制作滚屏动画

IntersectionObserver API是用于异步观察目标元素是否出现在根元素（如viewport或其他父级元素）中的API，以此来实现屏幕滚动触发动画效果的方式。该API可以监听多个不同的目标元素，并且相比于scroll事件，性能更好。

以下是一个使用IntersectionObserver API实现动画触发的示例：

当目标元素进入可见区域时，动画元素会从视口之外移动到可见区域。当目标元素离开可见区域时，动画元素也会随之移回到视口之外。你可以根据实际需求设置相应的动画效果和触发条件，使用IntersectionObserver API可以更便捷地实现一些复杂的滚动触发动画效果。

以上是IntersectionObserver API的原理，实际使用中，为了工作效率，我们可以使用IntersectionObserver API制作滚屏动画的js插件

AOS（Animate On Scroll）：一个轻量级但功能强大的库，允许您在滚动时以漂亮和流畅的方式添加动画效果。 GitHub 地址：https://github.com/michalsnik/aos

Intersection-Animation：一个现代化的JS库，可让您创建出色、快速且易于维护的交叉动画。 GitHub 地址：https://github.com/russellgoldenberg/intersection-animation

VivifyScrolly：一个基于Web组件的动画库，允许您为文本块、图片、视频、SVG等元素创建滚动动画，并为每个元素定义不同的动画类型。 GitHub地址： https://github.com/MihaiCernusca/vivify-scrolly