使用方法
在页面中引入jquery和scrolla.jquery.min.js以及animate.css文件。
1 2 3 | < link rel = "stylesheet" href = "animate.min.css" >
< script type = "text/javascript" src = "path/to/js/jquery.min.js" ></ script >
< script type = "text/javascript" src = "path/to/js/scrolla.jquery.min.js" ></ script >
|
HTML结构
你需要为执行动画的dom元素添加animate
class类,并通过data-*
属性来指定元素的动画类型,动画持续时间,动画延迟时间和偏移等属性。例如:
1 2 3 4 5 6 | < div class = "animate" data-animate = "rubberBand"
data-duration = "1.0s"
data-delay = "0.1s"
data-iteration = "1" >
要动画的div元素
</ div >
|
初始化插件
在页面DOM元素加载完毕之后,可以通过scrolla()
方法来初始化jquery-scrolla插件。
配置参数
jquery-scrolla插件的可用配置参数如下:
1 2 3 4 | $( '.animate' ).scrolla({
mobile: false ,
once: false
});
|
mobile
:是否允许在移动设备上执行滚动动画。 once
:设置为true
时,滚动动画只执行一次。
jquery-scrolla页面滚动动画插件的github地址为:https://github.com/maximzhurkin/jquery-scrolla