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


作者: | 2011/10/19 01:51:02 | 3 則迴響



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

這種效果稱為視差滾動(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 官網


標籤:,

分類:, ,

本文作者是Audi Lu

3 則留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

*

*

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料