jquery-scrolla是一款页面滚动触发动画插件。jquery-scrolla插件可以在页面向下或向上滚动时,进入视口的元素会触发指定的CSS3动画。它和animate.css完美结合,可以执行animate.css中的任何CSS3动画效果。
使用方法
在页面中引入jquery和scrolla.jquery.min.js以及animate.css文件。
<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-*
属性来指定元素的动画类型,动画持续时间,动画延迟时间和偏移等属性。例如:
<div class="animate" data-animate="rubberBand" data-duration="1.0s" data-delay="0.1s" data-iteration="1"> 要动画的div元素 </div>
初始化插件
在页面DOM元素加载完毕之后,可以通过scrolla()
方法来初始化jquery-scrolla插件。
$('.animate').scrolla();
配置参数
jquery-scrolla插件的可用配置参数如下:
$('.animate').scrolla({ mobile: false, // disable animation on mobiles once: false // only once animation play on scroll });
-
mobile
:是否允许在移动设备上执行滚动动画。 -
once
:设置为true
时,滚动动画只执行一次。
jquery-scrolla页面滚动动画插件的github地址为:https://github.com/maximzhurkin/jquery-scrolla
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!