lycorisradiata

WOW.js--让你的页面更生动!
有的页面在向下滚动的时候,有些元素会产生细小的动画效果。WOW.js依赖animate.css可以使你的页面更加有...
扫描右侧二维码阅读全文
21
2018/09

WOW.js--让你的页面更生动!

有的页面在向下滚动的时候,有些元素会产生细小的动画效果。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 30th, 2018 at 04:02 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment