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个参数:bindToscrollIn,它们都是可选参数。

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类,例如visibleinvisible 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-showCallbackdata-scroll-hideCallback属性来实现。例如:

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

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