WOW.js在页面滚动时展现动感的元素动画效果
插件描述：WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件
在一些网页上，当你滚动页面的时候会看到各式各样的元素动画效果，非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件，很容易定制，你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。
使用方法：
1、引入文件
文件版本地址： https://www.bootcdn.cn/wow/
1 | <link rel="stylesheet" href="css/animate.min.css">
|
2、HTML
1 2 | <div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>
|
可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如：
1 2 | <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
如果需要自定义配置，可如下使用：
1 2 3 4 5 6 7 8 | var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
|
配置
| 属性/方法 | 类型 | 默认值 | 说明 |
| boxClass | 字符串 | ‘wow’ | ‘wow’需要执行动画的元素的 class |
| animateClass | 字符串 | ‘animated’ | ‘animated’animation.css 动画的 class |
| offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
| mobile | 布尔值 | true | 是否在移动设备上执行动画 |
| live | 布尔值 | true | 异步加载的内容是否有效 |
animate3.7.2 中的效果
div.wow animated + 以下效果 ：
"bounce","flash","pulse","rubberBand","shake","swing","tada","wobble","jello","heartBeat","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig","flip","flipInX","flipInY","flipOutX","flipOutY","lightSpeedIn","lightSpeedOut","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","slideInUp","slideInDown","slideInLeft","slideInRight","slideOutUp","slideOutDown","slideOutLeft","slideOutRight","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","hinge","jackInTheBox","rollIn","rollOut"
