wow.js插件使用方法

前几天，在做一个项目中时，需要做到滚动条滑到某个位置时，才能显示动画，网上查询到有个wow.js可以达到要求，现在把我所知道的使用方法做如下总结：

因为wow.js 是依赖于animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足我们的各种需求。

但是也是存在浏览器兼容问题的

IE10+ Chrome Firefox Opera Safari都支持wow.js

可是IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

使用方法

1、引入文件

<link rel="stylesheet" href="wow.js" />

2、HTML

可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如：

<div class="wow slidelnLeft" data-wow-duration="" data-wow-delay="">

<div class="wow slidelnRight" data-wow-duration="" data-wow-delay="">

3、JavaScript

new WOW().init();

如果需要自定义配置，可如下使用：

var wow = new WOW({

    boxClass: 'wow',

    animateClass: 'animated',

    offset: 0,

    mobile: true,

    live: true

});

wow.init();