滚动加载动画——wow.js

平常我们在网站开发过程中，可能会需要做一些页面滚动到指定位置再执行某些动画的页面。所以特地收集了一个比较好用的轮子。
wow.js

image

一、引入

1. 引入animate.css,因为wow依赖animate动画库，所以需要的动画都可以从里面获取。

2. 引入wow.js

3. 初始化

    new WOW().init();
   

二、使用方法

在需要添加动画的块元素上面（块元素或者行内块元素，行内元素会有问题）添加类名。

<div class="wow slideInLeft"
    data-wow-duration="2s"     （动画持续时间）
    data-wow-delay="5s"         （动画延迟时间）
    data-wow-offset="10"        （元素的位置露出后距离底部多少像素执行）
    data-wow-iteration="10"> （动画执行次数，infinite为无限循环）
</div>

其中类名wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。

具体动画类名可访问animate.css获取或者wow官网获取，这里不多做解释。

三、注

• wow兼容ie10及以上，所以使用时需要加判断，ie10以下不初始化插件，即默认展示

      if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init();
      };
  

• 默认wow只加载一次动画，即滚动条再次往回滚动时候，不会有动画。但有时会有特定需求，是需要重复动画的。网上已有基于wow.js修改过的插件。

最后附上该插件下载地址：点我