WOW.js-元素在页面滚动时展示CSS3动画JS插件

WOW.js是一款效果炫酷的元素在页面滚动时展示CSS3动画的JS插件。默认wow.js使用animate.css作为动画库，但是你可以通过设置来使用你喜欢的动画库。

安装

可以通过bower或npm来安装wow.js插件。

bower install wowjs
npm install wowjs                  
                

使用方法

在页面中引入animate.css文件和wow.min.js文件。

<link rel="stylesheet" href="css/animate.css">
<script type="text/javascript" src="js/wow.min.js.js"></script>
                

HTML结构

如果你想某个HTML元素在页面滚动时执行动画效果，只需要简单的为这个元素添加.wow class类。然后在animate.css中选择一种动画class类。

<div class="wow bounceInUp">
  Content to Reveal Here
</div>                  
                

初始化插件

可以通过imageMaps()来初始化一个imageMaps实例。

配置参数

你可以在HTML代码中通过data属性来设置配置参数。例如：

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

默认的JS配置参数如下：

var wow = new WOW(
  {
    boxClass:     'wow',
    animateClass: 'animated',
    offset:       0,
    mobile:       true,
    live:         true,
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    },
    scrollContainer: null
  }
);
wow.init();                  
                

• boxClass：动画元素的class名称。默认为'wow'。
• animateClass：动画class类。默认为'animated'。
• offset：触发动画时元素的偏移距离。默认为0。
• mobile：是否在移动设备上触发动画。默认为true。
• live：是否异步加载内容。默认为true。
• callback：回调函数。
• scrollContainer：可选的滚动容器选择器，不设置时默认为window。

WOW.js插件的github主页地址为：https://github.com/matthieua/WOW