有的页面在向下滚动的时候,有些元素会产生细小的动画效果。WOW.js依赖animate.css可以使你的页面更加有趣。

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

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

入门

1.引入文件

css文件:<link rel="stylesheet" href="css/animate.min.css">
js文件:<script src="js/wow.min.js"></script>

2.HTML

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

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

3.JavaScript
可自定义配置如下:

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

官方下载:

http://mynameismatthieu.com/WOW/

Last modification:November 30, 2018
如果觉得我的文章对你有用,请随意赞赏