通过js滚轮滚动时调用动画

通过js滚轮滚动时调用动画

jquery-scrolla是一款页面滚动触发动画插件。jquery-scrolla插件可以在页面向下或向上滚动时，进入视口的元素会触发指定的CSS3动画。

简要教程

jquery-scrolla是一款页面滚动触发动画插件。jquery-scrolla插件可以在页面向下或向上滚动时，进入视口的元素会触发指定的CSS3动画。它和animate.css完美结合，可以执行animate.css中的任何CSS3动画效果。

在页面中引入jquery和scrolla.jquery.min.js以及animate.css文件。

HTML结构你需要为执行动画的dom元素添加 animate  class类，并通过data-*属性来指定元素的动画类型，动画持续时间，动画延迟时间和偏移等属性。例如：

要动画的div元素

data-animate: 动画类型

data-duration: 动画持续时间

data-delay: 动画延迟时间

初始化插件

在页面DOM元素加载完毕之后，可以通过scrolla()方法来初始化jquery-scrolla插件。

$('.animate').scrolla();

配置参数

jquery-scrolla插件的可用配置参数如下：

$('.animate').scrolla({

mobile: false, // 是否允许在移动设备上执行滚动动画。

once: false // 设置为true时，滚动动画只执行一次。

});

它和animate.css完美结合，可以执行animate.css中的任何CSS3动画效果。