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、引入文件

2、HTML

可以加入 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();

你可能感兴趣的:(wow.js插件使用方法)