scrollReveal（頁面緩入效果插件）

scrollReveal（頁面緩入效果插件）實現頁面滾動時動畫加載元素效果

　　前面我去了解了元素距頁面視圖距離，想實現頁面滾動是動畫加載元素（https://www.cnblogs.com/chenghuayike/p/11970731.html）到處撞牆，心肥意冷啊┭┮﹏┭┮，猛然間發現了scrollReveal 插件，查看了官檔后明白過來，這不就是我想實現的效果嘛，還是太過於萌新了。。。

　　好了，接下來我總結了一下 scrollReveal 插件的基本使用方法，加強記憶！！

　　scrollReveal 插件使用起來非常的簡單，三部曲：

　　1.引入 scrollReveal ：

　　<script src="https://unpkg.com/scrollreveal" type="text/javascript" charset="utf-8"></script>
　　// 或者下載到本地使用

　　2.js代碼：

window.sr = ScrollReveal();
sr.reveal('.foo'); // 這里的 .foo 為元素類名 引用與jquery語法相同

　　3.html代碼：

    <div id="containers">
   　　 <div class="foo"> Foo 🍺</div>
    　　<div class="foo"> Foo1 </div>
    　　<div class="foo"> Foo2 </div>
    　　<div class="foo"> Foo3 </div>
    </div>
　　　　 <div class="foo"> Foo4 </div>

　　運行項目即可（是不是非常的簡單？）

 

　　當然，這只是 scrollReveal 插件的最基本的用法，是固定的一種淡入效果，（卻不是我想要的動畫效果）接下來我們來看一看 scrollReveal 的屬性：

　　以下是scrollReveal插件 官方文檔 給出的屬性（自己整理了一下）：

　　

　　　　　　　//     屬性：（默認）
            delay: 0,                                // 延時時間
            distance: '0px',                            // 執行距離
            duration: 600,                            // 執行時長
            easing: 'cubic-bezier(0.5, 0, 0, 1)',     // 執行速度
            interval: 0,                                // 執行間隔（時間）
            opacity: 0,                                // 執行方式（透明度）
            origin: 'bottom',                        // 執行方式（偏移 top:自上而下,bottom:自下而上,left:自左往右,right:自右往左.）
            rotate: {                                // 執行方式（旋轉）
                x: 0,                                // x
                y: 0,                                // y
                z: 0,                                // z
            },
            scale: 1,                                // 執行方式（縮放）
            cleanup: false,                            // 暫時不知道是什么東西
            container: document.documentElement,        // 執行容器（后跟元素，填寫后只有容器內的元素執行動畫）
            desktop: true,                            // 是否在電腦上面執行
            mobile: true,                            // 是否在手機上面執行
            reset: false,                            // 是否重復執行（）
            useDelay: 'always',                        // 延時執行方式（always（一直延時執行），once（只延時執行一次），onload（只在加載時延時執行））
            viewFactor: 0.0,                            // 視圖顯示元素百分之多少的時候執行動畫（單位：小數，例：0.50 在元素展示超過百分之五十的時候，執行動畫）
            viewOffset: {                            // 視圖偏移（把視圖抽象成元素移動）
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
            },
            afterReset: function (el) {},            // 重置之后（視圖內看不到元素之后，退場動畫執行結束之后）
            afterReveal: function (el) {},            // 執行之后（動畫已經執行完畢（已完成））
            beforeReset: function (el) {},            // 重置之前（視圖內看不到元素之后，退場動畫執行結束之前）
            beforeReveal: function (el) {},            // 執行之前（動畫開始執行（未完成時））

　　這次是不是一目了然（肯定會了解的深入一點了吧），接下來根據官方文檔給出的使用方式，我們來試一試：

　　1.引入js  2.html代碼 （這兩步同上）

　　3.js代碼：（除了使用原生動畫屬性外，還有兩種使用方式）

　　第一種：

　　直接在 reveal 的時候，在后面參數內直接添加自己想要的某一些屬性：

　　　　var containers = document.getElementById("containers")
     　window.sr = ScrollReveal();
　　　　sr.reveal('.foo',{container:containers});

　　以上代碼中  {container:containers}  表示只有在 containers 中的類名為“foo”的元素執行 scrollReveal 插件的動畫效果，相當於確定某個盒子（containers）里面的元素執行scrollReveal

　　第二種：

　　我們可以先 var 一個 option 來寫入要替換默認屬性

　　　　var option = {
            delay: 0,
            distance: '140px',
            easing: 'ease-in-out',
            origin: "bottom",
            interval: 300,
            afterReset: function(el) {
                console.log("重置之后")
            },
            afterReveal: function(el) {
                console.log("執行之后")
            },
            beforeReset: function(el) {
                console.log("重置之前")
            },
            beforeReveal: function(el) {
                console.log("執行之前")
            },
            reset: true,
        }

　　接下來：

sr.reveal('.foo',option);

　　相當於用以上option中的屬性覆蓋掉scrollReveal插件的默認屬性，用來替換自己想要的效果，或者使用其中的回調函數等等

以上為我總結的 scrollReveal 插件的一些基本使用方法，相互學習，望大佬帶帶本萌新。