本文同步發表於斜槓女紙部落格：切版任務(四)：首頁畫面搭配ScrollReveal，網頁畫面動次動(3)

今天直接進入正題，滾動觸發CSS動畫的套件外掛挺多的，我知道的有AOS - Animate On Scroll library、ScrollMagic、wow.js...等等。

其中我比較常直接應用在專案上的是AOS - Animate On Scroll library，除了使用方法簡單、變化多元以外，主要是因為MIT License也可以直接在商業專案使用上。但AOS有時常常會跟公司專案有衝突，或者是畫面呈現上稍微卡卡的。

這次想說試看看朋友推薦的ScrollReveal.js，使用前先確認了一下他的授權：商業使用需購買授權，非商業可直接使用。

另外，瀏覽器的支援度也挺完整的！

第五關 引入ScrollReveal.js套用在畫面上

官方說明文件中推薦直接採用CDN方式引入，當然也有提供其他的使用方式。

<script src="https://unpkg.com/scrollreveal"></script>

這個套件外掛主要採用ScrollReveal()這個函式觸發動畫效果，使用方式如下：

ScrollReveal().reveal('.punchline');   //取得CLASS命名為punchline的元素
ScrollReveal().reveal('#punchline');   //取得ID命名為punchline的元素

可以預設整個網站的特效參數

let siteAnimate = ScrollReveal({
    reset: false,   //設定特效是否為單次出現，預設為單次
    origin: 'right',  //預設效果起始位置從右方出現
    distance: '500px',  //控制元素在顯示時移動多遠
    easing: 'ease-in-out'  //轉場速率 CSS transition
});

也可以針對個別元素進行參數設置

ScrollReveal().reveal('.logo', { duration: 2000, origin: 'left', delay: 325 });

最後設定好的 實際範例

等等，你是不是忘了什麼？
應該有發現我沒說到「Slide Down」的按鈕吧XD

我沒忘掉他唷，只是這個按鈕想加入Scroll Down的特效點我看範例，需要下方多些內容才能看到實際效果，預計會在房間資訊區做完以後再補上這個按鈕唷！

首頁區的部分暫時告一段落，明天開始來說房間列表區的切版血與淚(威)。

• ScrollReveal.js
• [十分鐘學習] ScrollReveal - 動態顯示內容
  ScrollReveal-元素隨頁面滾動產生動畫的js外掛