在页面添加初始动画特效
在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果，虽然动画效果就像ppt里面的动画效果一样。。。
环境设置
添加动画效果，首先要设置环境，第一步就是先要引入相应的js 和css
需要引入的js：wow.js
本案例中建议在头部引入这个js不然可能会出现页面先加载然后动画再出现的情况，这样显得动画是多余的哈哈哈，
在head部分中加入
当然也可以在头部引入animate.css 在最后引入wow.js
<head>
<link rel="stylesheet" href="/WOW/css/libs/animate.css">
<script src="/WOW/dist/wow.min.js"></script>
</head>
1
2
3
4
此处用了远程的引用 当然您也可以直接下载引用：
wow.js官网 wow.js
animate.css官网animate.css
这样情况下其实还不能直接使用，因为wow.js还需要初始化的过程
需要在animate.css以及wow.js引用之后加入让wow.js初始化的js代码
<script>new WOW().init();</script>
1
这样初始化就完成了，当需要添加动画时，只需要同时在需要添加动画的元素上增加wow这个样式以及animate.css里面有的动画样式
添加动画效果
<div class="wow bounceInUp" id="div1"></div>
1
这是最简单的引用方法，这样上面代码中的div1元素就会弹跳着进来，触发的时机是当在页面窗口即将被观察到的时候，也就是说，这个动画效果并不是在开始的时候就会表现（那样的话在屏幕外的动画效果是没有意义的）。在pc上表现为鼠标滚轮滚到这个元素的时候才会播放进入的动画，而手机上表现为当拉到这个元素的时候才会有动画。
如果只添加一个wow的样式，那么这个元素在被滚到之前是隐形的，只有用户看到这的时候才会出现。
当然就单纯有个开始的动画没有啥意思，有时候我们需要对动画出现的时间进行控制，或者是对动画进行循环播放，这个时候我们可以在元素里面添加wow.js才能解析的属性就行了
高级属性
data-wow-duration : 动画持续时间，时间越久动画越慢 例如 1s
data-wow-delay ： 延迟 时间越久动画越迟出现 例如 1s
data-wow-offset ：动画开始的距离，根据浏览器窗口底部框 当设置大的时候意味着动画更难出现 例如10意味着元素内容有10在浏览器中才会出现动画。默认值为0
data-wow-iteration ：动画重复次数 设为 infinite 时会持续不停重复 也可以设置整数
例子1
<div class="wow zoomIn" data-wow-duration="2s" data-wow-delay="0.5s"></div>
1
上面的这个元素动画会延迟0.5秒 缓慢地从中心点变大进入
例子2
<div class="wow pulse" data-wow-duration="1s" data-wow-iteration="infinite"></div>
1
上面这个例子的元素会不停地像心脏跳动一样 一秒跳一次不停地跳
通过改变这几个属性可以实现很多不同的效果
效果名字可以查看animate.css
选取自己喜需要的效果
自定义设置
在初始化wow的时候的自定义设置属性：
boxClass：当元素没有与浏览器有任何重复的地方时 隐藏 所设置的元素 默认值是wow；
animateClass：正在运行的时候的动画样式；
offset：当元素与浏览器窗口有多少交叉的时候动画会出现，数值越大越难出现默认值是0，即有任何交叉就会出现；
mobile：为手机端设置，因为手机设备的显示设备核心没有像电脑那么好，如果设为false则在手机端不显示动画效果 默认为true；
live：默认为true 持续检查页面中是否有用于wow动画样式的元素 如果设为false那么在页面加载之后再用js添加的wow样式将不会有动画效果 默认值为true；
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0,// default
mobile: true, // default
live:true // default
}
)
wow.init();
1
2
3
4
5
6
7
8
9
10
常见动画效果
fadeIn:渐现；
bounceIn:弹跳进入；
zoomIn:从小变大进入；
rotateIn:旋转进入；
slideInUp:滑动往上进入；
。。。更多还是去animate.css里看吧
animate.css配合js也能做出很复杂的效果比如两种效果叠在一起的效果，而懒一点用wow.js的话可以用嵌套效果的方式同时实现两种效果
---------------------
作者：towrabbit
来源：CSDN
原文：/towrabbit/article/details/79995223
版权声明：本文为博主原创文章，转载请附上博文链接！
如果觉得《页面滚动时触发动画特效 wow.js + Animate.css》对你有帮助，请点赞、收藏，并留下你的观点哦！
