wow和scrollreveal动画

animate（动画）官网参考链接：https://animate.style/

wow官网参考链接：https://www.delac.io/wow/docs.html

wow和scroolreveal的相同和区别之处

1.相同：和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。

2.不同：2.1  WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；

　　　　2.2 WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖 animate.css，但它的动画也是用 CSS3 创建的，所以它不支持 IE10 以下的浏览器。 IE6、IE7 等老旧浏览器不支持 CSS3 动画，并且因为不支持一些属性或方法会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

一、wow 动画（只需要以下四步，紫色标注为关键点）

1.wow.js依赖于animate.css，首先要引入animate.css

2.引入wow.js

3.在想实现动画的页面，加如下一句代码，初始化wow

    <script>

    new WOW().init();

 </script>

4.元素的类里添加对应的类就可以了，wow类是必须有的，wow类后面需要跟动画的类，例如slideInLeft

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>

第四步属性说明：

wow 类是必须有的且固定为wow写法、 slideInLeft说明了动画的样式，是从左边滑动出来的（这两个class值必填。其中动画样式根据自己需要选择）
data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。

二、scrollreveal

1.引入scrollReveal.js

2.js:

<script>
(function(){
window.scrollReveal = new scrollReveal({ reset: true, move: '50px'});
})();
</script>

3.<h1 class="h1" data-scroll-reveal="enter from the top over 1.5s">scrollReveal.js</h1>

参数描述

参数	类型	可用值	描述
origin	string	‘top’,’right’,’bottom’,’left’	动画的方向
distance	string	可用任何CSS单位值，如：’20px’,’10vw’,’5%’	动画的距离
duration	number	500	动画持续时间，单位毫秒
delay	number	0	动画的延迟时间，单位毫秒
rotate	object/number	{ x: 0, y: 0, z: 0 }	开始的角度，单位degrees
opacity	number	0	开始的透明度
scale	number	0.9	开始的缩放值
easing	string	‘ease’ ‘ease’ ‘ease-out’ ‘ease-in-out’ ‘ease-in-out’	动画的easing效果，可以是任何有效的CSS easing值
container	node	document.getElementById(‘foo’)	容器
mobile	boolean	true / false	是否在移动手机上显示动画效果
reset	boolean	true / false	元素是否在容器边界内来回滚动时都产生动画效果
useDelay	string	‘always’,’once’,’onload’	控制元素什么时候使用动画延迟
viewFactor	number	0.20	0.20表示元素在产生动画之前，它的20%在viewport或容器的边界之内
viewOffset	object/number	{ top: 48, bottom: 24 }	增加viewport或容器边界，单位像素
afterReveal	function	function( domEl ) {}	reveal动画之后触发的回调函数
afterReset	function	function( domEl ) {}	reset动画之后触发的回调函数