wow.js - 讓頁面 WOW 起來

WOW.js 跟上次講到的 AOS.js 都是可以依照滾動到物件的時候顯示動畫，

也經常使用在專案上，配合 animate.css 就可以使用許多不同的動畫效果囉！

一進到頁面你就會看到很多動畫的範例在你面前滾動，請點選左上的 GITHUB ，

查看許多細節設定，可以拉到網頁最下方的  Read the documentation

他就會一個步驟一個步驟教你使用！

step 1 :

請至 animate.css 引用他們已經幫我們寫好的動畫 CSS ，

可以選擇直接使用 CDN 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

或是直接到 animate.css 網站左上的 GITHUB 貓頭 去下載 animate.css 檔案後．直接引入到自己的檔案

<link rel="stylesheet" href="css/animate.css">

step 2 :

請到 WOW.js 的 GITHUB  點擊 dist 資料夾進入後下載 wow.js 的檔案，

之後請至自己的頁面上引用以及初始化

<script src="js/wow.min.js"></script>
<script>
   new WOW().init();
</script>

step 3 :

把 class name : wow 加入到你想呈現動畫的地方

<div class="wow">
     我要做動畫
</div>

step 4 ：

請至 animate.css  挑選想要呈現的動畫，滑鼠移到動畫文字後面會出現一個複製的按鈕，

點擊後即可直接複製 class name

因為我們是使用 animate.css 的動畫設定，因此我們也要配合他們使用動畫的 class name，

animate__animated ＋ 你複製下來的動畫 class name 這樣才算是正確的使用唷！

<div class="wow animate__animated animate__fadeIn">
     我要做動畫
</div>

完成以上設定之後其實就大功告成啦！

但是！

要是我們想做的進場動畫 animate.css  卻沒有呢？

WOW.js  也可以搭配自己寫的動畫唷！

一樣要先寫好想做的動畫 css ，並給他一個 class 來放置此動畫的相關設定，

我寫了一個動畫是會順時針旋轉兩圈的動畫，

.round {
    animation: round 1s ease-in-out 1 forwards;
}

@keyframes round {
   from {
     transform: rotate(0deg);
   }
   to {
         transform: rotate(720deg);
   }
}

接下來一樣放到想呈現動畫的地方，

<div class="wow round">
     自定義動畫 round
</div>

完成！

WOW.js 也有一些其他的設定，讓你的動畫可以小小客製化一下，

data-wow-duration:動畫執行時間
data-wow-delay:動畫開始前的延遲
data-wow-offset:開始動畫的距離（與瀏覽器底部有關）
data-wow-iteration:動畫的重複次數

寫法如下：

    <div class="box wow animate__animated animate__fadeIn" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="80" data-wow-iteration="10">
        我要做動畫
    </div>

附上完整的程式碼：

// CSS

    .box {
        width: 150px;
        height: 150px;
        border-radius: 4px;
        background-color: lightgrey;
        margin: 5px;
        line-height: 150px;
        text-align: center;
        color: darkslategrey;
        font-size: 18px;
    }

    .round {
        animation: round 1s ease-in-out 1 forwards;
    }

    @keyframes round {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(720deg);
        }
    }

// html

    <div class="box wow animate__animated animate__fadeIn" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="80" data-wow-iteration="10">
        我要做動畫
    </div>
    <div class="box wow round">
        自定義動畫 round
    </div>

//js

    new WOW().init();