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

什麼是視差滾動效果

視差滾動(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

參考資料

1 則留言: