高性能页面滚动触发HTML元素动画JS插件_jQuery之家-自由分享jQuery、html5、css3的插件库

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元素上添加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>

高性能页面滚动触发HTML元素动画JS插件