用 ScrollMe.js 做滾動動畫

我們在做一頁式的網頁時,由於內容都集中在同一頁,有時會被拉得太長。如果沒有做一些特別的處理,往往看起來會有點乏味,遇到這種情況我們通常會搭配一些 Scroll 的動畫效果來增加畫面的趣味,也就是當滑鼠滾動到頁面的某個區塊時,該區塊的元素會跑一些像是 Flash 的小動畫。但由於這些效果需要配合 Javascript,如果公司沒有配置前端工程師的話,設計師捧油們常常只能望效果興嘆。所幸,網路上已經有許多現成好用的套件可供大家選擇,像是之前我們介紹的 wow.js,或者今天要介紹的 ScrollMe.js,都可以很簡單的完成 Scroll Animation,下面是一個簡單的小教學,希望對大家有幫助。

使用前需知:

由於 jQuery 在 2.x 與 3.x 之間做了一個比較大的改版,而 ScrollMe.js 需要和 jQuery 搭配。但一直到這篇文章完成前,ScrollMe.js 的官網都只支援 jQuery 2.x,在 ScrollMe.js 官網正式提出修正版之前,你只能選擇 jQuery 2.x。所幸已經有人注意到這個問題,並將支援 jQuery 3.x 的 ScrollMe.js 釋出到 GitHub,我自己試了一下,這個非官方版的 ScrollMe.js 可以用在最新的 jQuery 3.2.1 版。下面整理了一個小清單,方便大家依自己的需要下載適當的 ScrollMe.js。

載入 jQuery 及 ScrollMe.js

在了解上述的差異後,我們正式進入 ScrollMe.js 的世界,這裡我們以 jQuery 3.x 為例,並在 head 的標籤內載入 jQuery 及 ScrollMe.js,記得路徑要改成自己的設定。

<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.scrollme.min.js"></script>

寫入 .scrollme 和 .animateme 兩組 class

在 body 的標籤裡加入 .scrollme 和 .animateme 兩組 class。這兩個 class 的用途分別為:

  • .scrollme 容器,決定觸發的範圍。
  • .animateme 則決定動畫的效果呈現。

兩組 class 的結構如下:

<div class="scrollme">
  <div class="animateme">...</div>
</div>

如果你需要自訂一些 class 的話,可以將自己的 class 加到 .animateme 前,如下:

<div class="scrollme">
  <div class="myClass animateme">...</div>
</div>

定義 data-

data- 前綴是 HTML5 新增的屬性,它可以用來指定傳送特定內容,以 ScrollMe.js 來說,它定義了下面的屬性:

  1. data-when:決定動畫觸發的位置在何處,有三種選項 (必要)
    • enter (當 .scrollme 頂部出現在視窗可視區時觸發)
    • exit (當 .scrollme 底部出現在視窗可視區時觸發)
    • span (當 .scrollme 頂部從視窗底部出現時觸發)
  2. data-from:動畫先行,值為 0-1,當值為 0 時,動畫的起點即是預設值的位置,反之為 1 時,動畫則由終點往回播註一,可以有小數點 (必要)
  3. data-to:動畫後置,值為 0-1,可以有小數點 (必要)
  4. data-easing:決定動畫漸變的方式,共四種選擇 (可選)
    • easeout (淡出)
    • easein (淡入)
    • easeinout (淡入淡出)
    • linear (線性)
  5. data-crop:略 (可選)
  6. data-opacity:決定透明度 0-1 (可選)
  7. data-scale,data-scalex,data-scaley 和 data-scalez:決定縮放的比例 (可選)
  8. data-rotatex,data-rotatey 及 data-rotatez:決定旋轉的角度,值為 0-360 (可選)
  9. data-translatex, data-translatey 及 data-translatez,移動的位置,以像素為單位 (可選)

前三個為必要的選項,後面六個可以依自己的需要增減,設定的方式如下:

<div class="scrollme">
  <div data-when="enter" data-from="1" data-to="0" data-translatex="-1000" class="animateme">...</div>
</div>

ScrollMe.js 實作的教學大致如上,你可以把檔案存好之後,到瀏覽器看看 Scroll Animation 的效果。

註一:其中比較要注意的是 data-from 和 data-to,由於英文的原意我不太能了解,在實作後,這兩個屬性的特點比較接近動畫順播放及倒播放的概念,例如:當 data-from 為 0,data-to 為 1,你的動畫設定是 x 軸由 100px 跑到 200px 的位置,則在 .scrollme 被觸發時,動畫會由 x 軸 100px 的位置播放到 200px 的位置。反之,當 data-from 為 1,data-to 為 0 時,動畫會從 x 軸 200px 的位置倒播回 100px 的位置。數值越小,行程越短,動畫也就越快,兩者的數值不能相同。如果你對這兩個屬性有更精準的解釋,歡迎你留言分享。

如果效果跑不出來時,要怎麼檢查?

如果你的效果跑不出來的話,建議你可以從下面幾點開始檢查。

  1. 確定你的 jQuery 使用的是 2.x 還是 3.x,並下載與其搭配的 ScrollMe.js
  2. 頁面內容的長度要大於 viewport 可視區,以 1920px * 1080px 的螢幕範圍為例,頁面長度需要大於 1080px,這樣 ScrollMe.js 才知道何時需要觸發動畫。
  3. data-when、data-from 和 data-to 三組屬性為必要設定。
  4. data-from 和 data-to 兩組屬性的數值不能相同。
  5. data-opacity、data-scale、data-rotate 及 data-translate 最少設定一組。
  6. 可能 ScrollMe.js 改版,有新的實作方式。

延伸閱讀:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

Scroll to top