JS函数库：页面滚动过程中元素产生动画效果 WOW.js

官网

WOW.js依赖animate.css, 所以它支持animate.css多达60多种动画效果。

浏览器兼容：IE9以及以前的版本不适用

使用方法：

1、引入文件

<link rel="stylesheet" href="css/animate.min.css" />

<script type="text/javascript" src="js/wow.min.js"></script>

2、HTML

1,Make an element revealable

Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it.
(You can change this CSS class in the WOW settings to avoid name conflicts.)

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

2,Choose the animation style

Pick an animation style in Animate.css , then add the CSS class to the HTML element

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

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

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

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

data-wow-duration: Change the animation duration
data-wow-delay: Delay before the animation starts
data-wow-offset: Distance to start the animation (related to the browser bottom)
data-wow-iteration: Number of times the animation is repeated

<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

new WOW().init();

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

var wow = new WOW({//以下都是默认值

　　boxClass: 'wow',

　　animateClass: 'animated',

　　offset: 0,

　　mobile: true,

　　live: true

});

wow.init();

boxClass: Class name that reveals the hidden box when user scrolls.

animateClass: Class name that triggers the CSS animations (’animated’ by default for the animate.css library)

offset: Define the distance between the bottom of browser viewport and the top of hidden box.
When the user scrolls and reach this distance the hidden box is revealed.

mobile: Turn on/off WOW.js on mobile devices.

live: consatantly check for new WOW elements on the page.