ScrollTrigger是一款高性能页面滚动触发HTML元素动画JS插件。该插件根据页面滚动的位置来对页面中的元素执行动画，插件中使用requestAnimationFrame，对用户的滚动不会产生额外的影响。

使用方法

在页面中引入ScrollTrigger.min.js文件。

<script src="path/to/ScrollTrigger.min.js"></script>
初始化插件

在页面加载完毕之后，可以通过ScrollTrigger.init()方法来初始化该插件。

<script>
  document.addEventListener('DOMContentLoaded', function(){
      ScrollTrigger.init();
  });
</script>

初始化方法调用2个参数：bindTo和scrollIn，它们都是可选参数。

bindTo参数是动画HTML元素的容器，通常是document.body。

scrollIn参数是从中获取滚动位置的元素，通常是window。

HTML结构

接下来你需要在HTML元素上添加data-scroll属性。

<div data-scroll></div>

如果你想在元素进入视口时变为可见，离开视口时隐藏，可以在进入视口是为元素添加visible class类，在离开视口时添加invisible class类，然后在你的CSS文件中定义这两个class类的动画效果。

.invisible {
    transition: opacity 0.5s ease;
    opacity: 0.0;
}

.visible {
    transition: opacity 0.5s ease;
    opacity: 1.0;
}

这样，一个简单的进入视口时元素淡入效果，离开视口时元素淡出效果的动画就完成了。

配置参数

data-scroll属性可以设置以下以下配置参数。

参数 类型 描述 示例代码
toggle() CSS Classes 一对用于在滚动时切换的class类，例如visible和invisible。 data-scroll="toggle(.animateIn, .animateOut)"
也可以不带.号，
data-scroll="toggle(animateIn, animateOut)"
offset() Pixels 添加到元素上的偏移值。接收X和Y两个数作为参数。 data-scroll="offset(0,50px)"表示Y轴50像素的偏移。
px单位可以不写：
data-scroll="offset(-50,0)"
addWidth Boolean 是否添加元素的偏移宽度，使元素完全可见时才添加相应的class类。 data-scroll="addWidth"
addHeight Boolean 是否添加元素的偏移高度，使元素完全可见时才添加相应的class类。 data-scroll="addHeight"
centerHorizontal Boolean 是否添加元素的一半偏移宽度，使元素在一半可见时就添加相应的class类。 data-scroll="centerHorizontal"
centerVertical Boolean 是否添加元素的一半偏移高度，使元素在一半可见时就添加相应的class类。 data-scroll="centerVertical"
once Boolean 是否让动画只执行一次。 data-scroll="once"

回调函数

你可以在元素显示或隐藏之后触发回调函数，通过data-scroll-showCallback或data-scroll-hideCallback属性来实现。例如：

<div data-scroll data-scroll-showCallback="alert('Visible')" data-scroll-hideCallback="alert('Invisible')"></div>

ScrollTrigger插件的github地址为：https://github.com/terwanerik/ScrollTrigger