WOW.js

這三四年來,為了方便手機及平板使用,網頁的編排及內容也朝簡化邁。過去動輒三、四欄的編排方式漸漸被淘汰。取而代之的是透過數張高解析的底圖,輔以 Parallax scrolling (視差滾動) 的一頁式網站逐漸冒出頭來。這樣做有幾點好處,一、方便行動設備透過手指操控畫面,上下滑動非常直覺,完全不需要學習;二、內容和編排簡化後,文字和連結可以放大,避免文字或連結會因為內容過於豐富而太小;三、使用者不容易迷路,區塊和段落分明,網站的服務項目一目了然。

為了讓畫面不因內容的簡化而顯得單調,有時候設計師們也會在頁面的安排上一些 CSS3 的動態效果,添加使用者在閱讀上的趣味。但 CSS3 有個問題,它雖然可以用短短幾行敘述就輕易地創造出一些好玩的動態效果,但缺乏一些 DOM 的觸發機制,讓 CSS3 在使用上相對受限。而 DOM 正是 Javascript 的強項。因此除了 CSS3 之外,往往還會再搭配 Javascript 來增加互動,而 WOW.js 就是用來處理觸發捲動頁面需求的函式庫。

WOW.js 使用範例:

請先下載 WOW.js

第二步:

在 head 的標籤裡,加入 WOW.js 的連結,如下

<script src="wow.js"></script>

第三步:

在 <script src=”wow.js”></script> 下一行建立 WOW 物件,內容如下

<script>
 new WOW().init();
</script>

第四步:

在需要觸發 WOW.js 的標籤下,新增名為 wow (小寫) 的 Class。範例內容如下:

<p class="wow">this is WOW.js</p>

第五步:和 WOW.js & animate.css 整合

我們在 animate.css 的文章提到:animate.css 只負責動畫,觸發動畫則有兩種方式,一種是增加 animated 的 Class,另一種則需要和 Javascript 互相搭配,當時我們只提到增加 animated 的方式,Javascript 則未提,這裡我們以 WOW.js 為例。

請在 head 的標籤裡引入 animate.css,內容如下:

<head>
<link rel="stylesheet" type="text/css" href="animate.css">
<script src="wow.js"></script>
<script>
 new WOW().init();
</script>
</head>

第六步:

在剛剛 <p class=”wow”>this is WOW.js</p> 的地方,加上 animate.css 的 Class,這裡我們選擇的動畫範例是閃爍,閃爍的 Class 名稱為 flash。如果你想查詢更多 animate 有哪些動畫效果的話,也可以到他們的官網查詢。範例如下:

<p class="wow flash">this is WOW.js</p>

第七步:

其實到目前為止,觸發動畫就已經完成。
但為了讓效果更明顯,和 animate.css 的 animated 做出區隔;
我們在動畫觸發的物件前面,增加許多 p 標籤,目的是為了讓畫面的長度超過可視範圍。
如果你用 animate.css 的 animated 觸發的話,不論是否在可視範圍之內,閃爍的動畫都就會被執行。
但如果你用 WOW.js 來觸發的話,只要在視窗的可視範圍之外,動畫就不會被執行。
只有在你往下捲動視窗,到了出現有設定 wow 的標籤時,閃爍的動畫才會被執行。

<p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
<p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
<p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>

<p class="wow flash">this is WOW.js</p>

相關連結:

  1. 效果預覽:WOW.js
  2. 用 ScrollMe.js 做滾動動畫
  3. 下載 wow.js:https://github.com/matthieua/WOW
  4. ANIMATE.CSS:CSS 動畫

4 thoughts on “WOW.js

  1. 回覆
    Guest - 2016-05-18

    感謝教學!非常受用

  2. 回覆
    HIROKI - 2016-05-19

    很厲害的教學,感謝!

  3. 回覆

    […] Javascript,為了避免篇幅太長,到開始討論 WOW.js 的時候再一起介紹。先醬子 […]

  4. 回覆

    […] wow.js,或者今天要介紹的 ScrollMe.js,都可以很簡單的完成 Scroll […]

發表迴響

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

Scroll to top