#UI+前端#（六）动效形成（wow.js）

WOW.js使用方法

• 引入文件
  <link rel="stylesheet" href="css/animate.css">
• HTML
  <div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>
  • 可以加入 data-wow-duration（动画持续时间）/ data-wow-delay（动画延迟时间）/ data-wow-offset（动画开始位置）属性，如：
    <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="200"></div>
• JavaScript

<script src="js/wow.min.js"></script>
<script>
	new WOW().init();
</script>

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

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

• 配置

• 属性/方法 类型 默认值 说明

  • boxClass 字符串 ‘wow’ 需要执行动画的元素的 class （默认“wow”）
  • animateClass 字符串 ‘animated’ animation.css 动画的 class （默认“animated”）
  • offset 整数 0 距离可视区域多少开始执行动画 （默认“animated”）
  • mobile 布尔值 true 是否在移动设备上执行动画 （默认true）
  • live 布尔值 true 异步加载的内容是否有效 （默认true）

• 动画关键词（类名）：

bounceIn
bounceInLeft
bounceInRight
bounceInUp
bounceInDown
bounceOut

fadeIn
fadeInLeft
fadeInRight
fadeInUp
fadeInDown
fadeOut
lightSpeedIn
lightSpeedOut

rotateIn
rotateInUpLeft
rotateInUpRight
rotateInDownLeft
rotateInDownRight
rotateOut

rollIn
rollOut

slideInLeft
slideInRight
slideInUp
slideInDown
slideOut

zoomIn
zoomInLeft
zoomInRight
zoomInUp
zoomInDown
zoomOut