通过js滚轮滚动时调用动画_JS函数库：页面滚动过程中元素产生动画效果 WOW.js...

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

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

使用方法：

1、引入文件

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.)

Content to Reveal Here

2,Choose the animation style

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

Content to Reveal Here

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

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

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 distancethe hidden box is revealed.

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

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