適當的在網站中加入動態效果，能為網站帶來加分作用外，也讓使用者與網站有互動回饋。不用擔心要寫大量的 Javascript 來處理，只要跟著一起做，很簡單就能開始幫自家網站加入動態元素嘍！

使用的套件

首先，我們需要使用到以下兩個套件：

Animate CSS 模組這是一個很豐富的CSS動態套件，到這裡 Animate.css 看看它提供的所有動態效果，相信你已經看到了熟悉或是心儀的效果了～
WOW JS 這是讓你安心的Js套件，看到 WOW.js 展示的你就明白這個模組的用處。區塊滑到才顯示的動態邏輯通通不用寫，一行就能解決～

這兩個套件都能應用在網站開發中，並不只限於 Drupal。接下來，你可以選擇用 Drupal 的安裝方式，或者採用嵌入的方式。

當然，以下會以 Drupal 的安裝方式來進行。

安裝 Animate CSS & WoWJS 模組

安裝方式都很簡單，我們就依次來安裝。不過在開始之前，我們會需要先安裝 Libraries module，因為以下兩個模組，會需要放套件到特定的位置。

1. Animate CSS

點開網址看看它的安裝方式，你會看到 Dependencies ，它指出我們還需要自行下載 Animate.css 的 Libraries 到 sites/all/libraries/ 底下，並改名為 animate。

那就跟著說明做吧，到它提供的網址 https://github.com/daneden/animate.css 整包下載下來，然後改名放到 sites/all/libraries/ 。

下一步 Downloads，因為案例是使用 Drupal 7，所以就直接複製連結網址到drupal中安裝吧！

安裝好後，就到模組中啟用它。

2. WoWJS 來看看 WoWJS 的安裝說明，它需要 Libraries module 跟 WOW Javascript library，從安裝步驟就說得很清楚，點擊 https://github.com/matthieua/WOW/archive/master.zip 下載，改名為 wow後放到sites/all/libraries/底下。

之後檢查 sites/all/libraries/wow/dist/ 這個路徑底下，有沒有 wow.min.js 檔案。

接下來就來安裝，並到模組中啟用它。

下一步，到 Reports > Status Report 檢查一下，是否有安裝成功。

動態應用

準備好了嗎？來看看 WoWJS 的文件，首先要嵌入檔案，不過我們在上一步驟已經處理好了，所以重點只有下圖標起來的那一個 new WOW().init(); 。

當然，若你有更多 WOWJS 的設定，也可以寫成下方這樣，自訂 wow class名稱、手機版的相關設定等，相當方便！這部分就交給各位自己去調整需求嘍～

var wow = new WOW(
  {
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       true,       // trigger animations on mobile devices (default is true)
    live:         true,       // act on asynchronously loaded content (default is true)
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    },
    scrollContainer: null,    // optional scroll container selector, otherwise use window,
    resetAnimation: true,     // reset animation on end (default is true)
  }
);
wow.init();

再繼續往下看，你會發現要使用的話，就把 wow 跟 bounceInUp (在Animate.css挑中的效果名稱)，加在目標標籤上就完成了！

Animate.css中的 bounceInUp 效果。所以你就可以挑個想要放的動態效果，記住它的名稱。

所以接下來，你就可以使用 BlockAnimate 這個模組，針對區塊來加入動態。但加在區塊上會有一定的限制，通常很多都是加在區塊中的各個小部件中，所以你可以寫很簡單的 jQuery 將 class 加入到目標標籤上。注意：new WOW().init();的部分要放在addClass()下面唷！

$('#example').addClass('wow fadeInUp');

new WOW().init();

另外，若是您懂CSS想自己建立效果的話，也可以自己建立。例如，拿看看 Animate.css 的 fadeInLeft 來改，覺得從左至右的距離太長，那就複製出來改掉 class 名稱跟 transform 的數值。

你就可以把 fadeFromLeft 加到 wow 後面，變成這樣：

$('#example').addClass('wow fadeFromLeft');

接下來，你就可以去加入適合的動態效果到網站了！

結語

幾乎很多的網頁都會有些動態需求，只是大部分的人會在 js 的撰寫上花比較多的時間。而 Animate CSS 搭配 WOWJS ，其實就可以滿足一般的動態需求。Animate CSS 提供了豐富的動態效果，WOWJS節省掉 js 邏輯撰寫的部分，所以網站要加入動態元素變得非常的簡單！

把網站變得生動，在操作上增添許多樂趣，這樣難道不是一舉數得嗎～～～

沒想到就這麼簡單？ 用 illustrator 來畫網頁 SVG 動畫吧！

延伸閱讀

【Drupal教學】實作Animate.css + WoWJS 做出高質感網頁設計

【Nuxt教學】來玩 AOS.js 讓你的網頁變生動吧！

沒想到就這麼簡單？用 illustrator 來畫網頁 SVG 動畫吧！