十分鐘建立一個視差滾動效果頁面

什麼是視差滾動效果

視差滾動（Parallax Scrolling）是指讓通過鼠標實現網頁多層背景以不同的速度移動，從而形成立體的運動效果，帶來非常出色的視覺和交互體驗。這種網站通常通過鼠標滾輪滾動來實現，用不同於傳統的方式來製造不一樣的使用者感受。

範例

首先來看一下我們想達到的效果： 範例網站1 範例網站2 範例網站3

可以注意到，有些區塊的滾動速度與頁面滾動速度是有落差的，這篇文章就來示範如何製造這樣的效果。

實作一個簡單的視差滾動

這樣的效果已經有個Library叫做jQuery-Parallax，不過少了一個我想用的參數，而且新版的也沒有說明，因此乾脆自己修正： 我的jQuery-Parallax，以下就來稍微介紹如何使用。

1. 頁面加入jQuery, jQuery-Parallax

   <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
   <script src="javascripts/jquery-parallax.js"></script>

2. 有幾個div，各自擁有超過其範圍的背景(css background)。
3. 以上的div加上一個統一的 class: bg，方便之後選取設定。
4. 啓用方式：

   $(window).load(function() {
       $('.bg').parallax({offsetY:-200}); //jQuery selector中可以放任何你想要parallax效果的元素
   }
     

5. 完成，就這麼簡單。
6. 注意：
   • 此Library的效果是作用在元素的背景(background)。
   • 為達最佳效果，背景圖片高度（因為我們是針對垂直捲動作調整）請一定要超出區塊至少20%，比如說區塊高500px，那麼圖片最好要有600px，否則一捲就露餡了。

jQuery Parallax 參數說明

offsetX (default: "50%")

預設是讓背景圖片水平置中，也可以自己傳入自己想要的位置。位置如何設定請參考MDN background-position，這裡設定的是第一個參數。

offsexY (default: 0)

此參數可以額外的調整背景的垂直偏移量。

speedFactor (default: 0.12)

背景相對於捲軸的移動速度，調整不同的速度可以有不一樣的視覺效果。

outerHeight

計算時使用元素的outerHeight還是本身的Height。

參考資料

• jQuery-Parallax
• NBW
• 60多個超炫的視差滾動效果網站設計欣賞