wow.js

wow.js是一款结合了Animate.css,可以在页面向下滚动时,为页面中的元素加载动画的js。

项目地址:https://github.com/graingert/wow
CDN: Animate.css https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css
CDN: wow.js https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js

使用方法:

1、wow.js的使用必须依赖于上篇文章介绍的Animate.css,所以在使用前需要先引入Animate.css。

<link rel="stylesheet" href="css/animate.min.css">

2、头部引用并激活wow.js。

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

3、给需要动画的页面元素添加wow和Animate类;其中wow是必须项,Animate效果类参考上一篇文章中的ClassName

<div class="wow fadeInLeft">
    <img src="exp.jpg"/>
</div>

如果默认效果无法满足需求,可以通过使用高级类进行进一步的自定义;
data-wow-duration: 动画持续时间;
data-wow-delay: 动画开始前的延迟时间;
data-wow-offset: 激活动画的距离(相对于底部位置);
data-wow-iteration: 动画的重复次数;

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

4、自定义设置

wow = new WOW(
{
boxClass:     'wow',      // 需要执行动画的元素的类名
animateClass: 'animated', // animation.css 动画类名
offset:       0,          // 设置滚动触发动画的距离(相对于底部)
mobile:       true,       // 是否在移动设备执行动画
live:         true        // 异步加载的内容持续检测
}
)
wow.init();