jquery.scrollAnimations是一款页面滚动时动态为元素添加class的jQuery插件。它结合animate.css来使用,可以为元素进入浏览器视口时添加炫酷的动画特效。
使用方法
在页面中引入jQuery和jquery.scrollAnimations.js文件。
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.scrollAnimations.js"></script>
HTML结构
例如要制作一个单元素的动画,可以使用下面的HTML结构。
<h1 data-animation="fadeInUp">Heading 1</h1>
如果要制作一组元素的动画,可以使用下面的HTML结构。
<section data-animation-container> <div class="container"> <div class="row"> <div class="col-sm-6" data-animation-child data-animation="fadeInUp" data-animation-delay="0ms"> [Something to animate in] </div> <div class="col-sm-6" data-animation-child data-animation="fadeInUp" data-animation-delay="500ms"> [Something else to animate in] </div> </div> </div> </section>
初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery插件。
var $containers = $('[data-animation]:not([data-animation-child]), [data-animation-container]'); $containers.scrollAnimations();
配置参数
offset
:元素距离视口多少时,开始执行动画。浮点数,默认值为0.8,表示距离浏览器窗口顶部80%。
例如:
$('[data-animation]').scrollAnimations({ offset: 0.5 });
该页面滚动时动态为元素添加class的jQuery插件的github地址为:https://github.com/mindgruve/jquery.scrollAnimations
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!