網頁設計中的多層視差滾動效果 (Parallax scrolling)

觀察上面的圖片，裡面有三張圖片，分別放置於不同階層，如此可以構成一幅具有簡單景深的畫面。假設我們將三張圖作成由右向左捲動的動畫，但背景圖片動得比較慢，前景圖片動得比較快，我們就可以感受到較符合生活經驗的景深效果。

這種效果稱為視差滾動(Parallax scrolling)，它是電腦圖學中一種特別的滑動特效技巧，首次出現於1982年一款叫Moon Patrol的遊戲，主要是用來摸擬3D效果。滾動視差的原理是把背景圖片的移動速度放慢，讓前景圖片移動較快，因而在2D畫面上產生多層次的佈景深度。

把滾動視差應用在網頁設計上，也具有非常棒的視覺效果，而且只要使用jQuery外掛搭配CSS設定就可以幫助我們快速製作出含有滾動視差效果的網頁了，非常方便。

本篇要介紹的Plugin是 Scrolling Parallax Plugin for jQuery，我依照它的範例，修改成一個Demo，可以觀察到有三層葉片都有不同的捲動速度，還有三個空白DIV也設定了不同速度，如此就可以模擬景深，非常有趣!

也可以看看「橫向捲動」的實例：
http://www.indofolio.com/
http://ericj.se/

這邊則是WDL整理的21個具有Parallax Scrolling效果的網站：
http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design

參考資料：
維基百科 – Parallax scrolling
Scrolling Parallax Plugin for jQuery 官網

標籤：jQuery外掛, Parallax scrolling

分類：JavaScript技巧, 介面設計, 網站設計

本文作者是Audi Lu