wow.js实现各种动画特效

下载地址
https://www.bootcdn.cn/wow/
官方网站
https://www.delac.io/wow/
WOW.js用于设置用户滚动页面时触发各种CSS动画，WOW.js需和animate.css配合使用

animate.css演示地址：https://www.dowebok.com/demo/2014/98/
GitHub
使用方法
1.引入animate.css

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

2.引入WOW.min.js

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

3.初始化WOW

new WOW().init();

参数
data-wow-duration:动画持续时间
data-wow-delay:(动画延迟时间)
data-wow-offset:(偏移量) 离元素多远执行动画
data-wow-iteration:动画重复次数
4.在需要添加动画的元素上增加class类
格式如下：
class = 'wow animate'
实现动画必须添加wow animate为animate.css的动画效果
常用动画效果如下

动画	说明
bounce	弹跳
flash	闪烁
pulse	放大，缩小
rubberBand	放大，缩小，弹簧
shake	左右晃动
headShake	左右小幅晃动
swing	左右扇形摇摆
tada	放大，左右上下晃动，缩小
wobble	左右小幅(圆点较远)扇形摇摆
jello	左右左右上下晃动
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	中心Y轴旋转，放大，缩小
. flipInX	元素中心X轴旋转
flipInY	元素中心Y轴旋转
flipOutX	中心X轴旋转，消失
flipOutY	中心Y轴旋转，消失
lightSpeedIn	从右到左，平行四边形，左上角突出进入
lightSpeedOut	从左到右，平行四边形，左上角突出进入
rotateIn	元素中心顺时针旋转进入
rotateInDownLeft	元素左外长半径顺时针旋转进入
rotateInDownRight	元素右外长半径逆时针旋转进入
rotateInUpLeft	元素左外长半径逆时针旋转进入
rotateInUpRight	元素右外长半径顺时针旋转进入
rotateOut	元素中心顺时针旋转消失
rotateOutDownLeft	元素左外长半径顺时针旋转消失
rotateOutDownRight	元素右外长半径逆时针旋转消失
rotateOutUpLeft	元素左外长半径逆时针旋转消失
rotateOutUpRight	元素右外长半径顺时针旋转消失
hinge	从右上到坐下，顺时针旋转，从上到下消失
rollIn	元素左外长半径顺时针旋转，平滑进入
rollOut	元素右外长半径顺时针旋转，平滑进入
zoomIn	元素由小变大进入
zoomInDown	元素由小变大，从上方进入
zoomInLeft	元素由小变大，从左方进入
zoomInRight	元素由小变大，从右方进入
zoomInUp	元素由小变大，从下方进入
zoomOut	元素由大变小，消失
zoomOutDown	元素由大变小，从下方消失
zoomOutLeft	元素由大变小，从左方消失
zoomOutRight	元素由大变小，从右方消失
zoomOutUp	元素由大变小，从上方消失
slideInDown	元素从上到下，平滑进入
slideInLeft	元素从左到右，平滑进入
slideInRight	元素从右到左，平滑进入
slideInUp	元素从下到上，平滑进入
slideOutDown	元素从上到下，平滑消失
slideOutLeft	元素从右到左，平滑消失
slideOutRight	元素从左到右，平滑消失
slideOutUp	元素从下到上，平滑消失

本文部分内容转载自https://blog.csdn.net/qq_21041889/article/details/98647097