基于css3的动画效果插件 wow.js 和 Scrollreveal.js

最近发现animate.css很漂亮，可以做很多动画效果，一些需要炫酷一些的网址可以添加，而且使用方便，添加类就可以了，使用方法有些像bootstrapt，只要给标签添加类就可以出现效果，而且也可以自己用js结合wow.js控制效果，只是必须要浏览器版本高些的才支持。

例如：IE10+，才可以使用!!!!!!!!!!!!

*animate.css的使用方法推荐网址：https://www.cnblogs.com/xiaohuochai/p/7372665.html

*wow.min.js 支持css3多种动画的效果！

WOW.js 需要 animate.css 配合，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。wow.min.js可以实现在滚动下的动画状态。

使用方法：

1、加入animate.css

1	<link href="http://www.bbsxiaomi.com/case/css/animate.min.css" rel="stylesheet">

2、加入wow.js

1	"http://www.bbsxiaomi.com/js/wow.min.js">

3、元素中加入class

1	<div class="wow animated tada">tadadiv>

 

4、可以加入 data-wow-iteration（动画重复次数）data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如

1	<div class="wow animated wobble"   data-wow-iteration="4" data-wow-duration="4s" data-wow-delay="3s">wobblediv>

5、wow.js 使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

1 2 3 4 5

6、也可以自定义wow.js

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’	需要执行动画的元素的 class
animateClass	字符串	‘animated’	animation.css 动画的 class
offset	整数	0	距离可视区域多少开始执行动画
mobile	布尔值	true	是否在移动设备上执行动画
live	布尔值	true	异步加载的内容是否有效

增加顺序动画，在标签上增加 

1	data-wow-delay="0.3s"

 

二、Scrollreveal.js

推荐网址：http://www.dowebok.com/134.html

只需要引用Scrollreveal.js文件即可，不像wow.js依赖animation.css。而且可以做一次或多次动画，动态动画效果，而wow.js只能执行一次动画的静态动画效果

例子：

1*鼠标向下滚动的时候做动画

    

    

    

    

    

    

    ....

用法：可以调整对应的参数来实现一些动画效果，

2*做瀑布流的案例

可以用一个大盒子里面包裹3个ul，让ul浮动起来然后形成3列

    

        

        

        

        ....
    
    

        

        

        

        ....
    
    

        

        

        

        ....
    

第三个参数：sr.reveal('.man',config1，下一个动画的间隔时间);