基于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	<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>

3、元素中加入class

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

 

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"></>wobble</div>

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

1 2 3 4 5

<script> if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){     new WOW().init(); }; </script>

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*鼠标向下滚动的时候做动画

<!--类似瀑布流的效果但是图片时一样大小的-->
<style>
    ul>li{float: left;width: 30px;height: 50px;background: red;margin: 10;}
</style>
<ul>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    ....
</ul>
<script src="Scrollreveal.js"></script>
<script>
    window.onload = function (ev) {
        //参数
        var config = {
            reset: true, //滚动鼠标时，动画开关
            origin:'right', //动画开始的方向
            duration:500, //动画持续时间
            delay: 0,  //延时
            // enter: 'bottom',
            rotate:{x:100,y:100,z:0}, //过度到0的初始角度
            opacity:0,  //初始透明度
            scale:0.9,   //缩放
            easing:'cubic-bezier(0.6,0.2,0.2,1)',  //缓动'ease','ease-in-out','linear',,,,
        };

        //作用到sr上
        window.sr = ScrollReveal();
        sr.reveal('.sr',config);
    }
</script>

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

2*做瀑布流的案例

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

<!--瀑布流的效果-->
<style>
    .box{width: 1200px;overflow: hidden;margin: 0 auto;}
    .box>ul{float: left;width: 300px;margin: 10px;}
</style>
<div class="box">
    <ul>
        <li class="sr"></li>
        <li class="sr"></li>
        <li class="sr"></li>
        ....
    </ul>
    <ul>
        <li class="sr"></li>
        <li class="sr man"></li>
        <li class="sr"></li>
        ....
    </ul>
    <ul>
        <li class="sr"></li>
        <li class="sr"></li>
        <li class="sr"></li>
        ....
    </ul>
</div>

<script src="Scrollreveal.js"></script>
<script>
    window.onload = function (ev) {
        //参数
        var config = {
            reset: true, //滚动鼠标时，动画开关
        };
        var config1 = {
            origin:'right', //动画开始的方向
            duration:1500, //动画持续时间
            delay: 0,  //延时
            rotate:{x:100,y:100,z:0}, //过度到0的初始角度
            opacity:0,  //初始透明度
            scale:3,   //缩放
        };

        //作用到sr上,来回加载动画config
        window.sr = ScrollReveal();
        sr.reveal('.sr',config);
        //做特殊处理
        sr.reveal('.man',config1);
    }
</script>

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