WOW.js - 让页面滚动更有趣

WOW.js - 让页面滚动更有趣WOW.js 能让页面滚动时显示动画,使页面更有趣。WOW.js 简单易用 轻量级 WOW.js 无需jQuery 纯JS

 

1、引入WOW.js插件，搭配animated.css实现动画

<link rel="stylesheet" href="http://cdn.staticfile.org/animate.css/2.0/animate.min.css">
<script src="http://cdn.staticfile.org/wow/0.0.7/wow.min.js"></script>

 

2、页面元素使用

<div>
  <p class="wow fadeInUp" style="padding-top: 0.36rem;"><img src="img/cp_03.png"></p>
  <p class="wow fadeInUp" style="padding-top: 0.2rem;"><img src="img/cp_04.png"></p>
  <p class="wow fadeInUp" style="padding-top: 0.2rem;"><img src="img/cp_05.png"></p>
</div>

 

2-1、可以加入 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、js创建wow对象

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

 

3-1、可自定义配置

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

 

3-2、配置表

属性/方法	类型	默认值	说明
boxClass	字符串	'wow'	‘wow’需要执行动画的元素的 class
animateClass	字符串	'animated'	‘animated’animation.css 动画的 class
offset	整数	0	距离可视区域多少开始执行动画
mobile	布尔值	true	是否在移动设备上执行动画
live	布尔值	true	异步加载的内容是否有效