基於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，下一個動畫的間隔時間);