页面滚动时触发动画特效 wow.js + Animate.css

在页面添加初始动画特效
在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果，虽然动画效果就像ppt里面的动画效果一样。。。

环境设置
添加动画效果，首先要设置环境，第一步就是先要引入相应的js 和css 
需要引入的js：wow.js 
本案例中建议在头部引入这个js不然可能会出现页面先加载然后动画再出现的情况，这样显得动画是多余的哈哈哈， 
在head部分中加入 
当然也可以在头部引入animate.css 在最后引入wow.js

   
   

1
2
3
4
此处用了远程的引用 当然您也可以直接下载引用： 
wow.js官网 wow.js 
animate.css官网animate.css 
这样情况下其实还不能直接使用，因为wow.js还需要初始化的过程 
需要在animate.css以及wow.js引用之后加入让wow.js初始化的js代码

1
这样初始化就完成了，当需要添加动画时，只需要同时在需要添加动画的元素上增加wow这个样式以及animate.css里面有的动画样式

添加动画效果

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

1
上面的这个元素动画会延迟0.5秒 缓慢地从中心点变大进入

例子2

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 
原文：https://blog.csdn.net/towrabbit/article/details/79995223 
版权声明：本文为博主原创文章，转载请附上博文链接！