十月 29, 2018 | 前端與Vue

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

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

適當的在網站中加入動態效果,能為網站帶來加分作用外,也讓使用者與網站有互動回饋。不用擔心要寫大量的 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中安裝吧!

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

<br />

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 邏輯撰寫的部分,所以網站要加入動態元素變得非常的簡單!

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