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

以下文章來自「mrmu

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



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

這個網誌中的熱門文章

原來Google雲端硬碟也能開放「匿名上傳」,做為學生作業、比賽稿件上傳就不用再傷腦筋了!(Google Apps Script應用服務指令碼)

「Google 語音輸入法」、「訊飛中文語音輸入法」APP ,讓智慧型裝置也能輕鬆「離線」進行語音輸入!

OnlineVideoConverter 雲端影片擷取服務,讓您不只下載 youtube 影片,更能直接下載指定範圍的影片內容,幫您省下影片下載後再剪輯轉檔的時間!(也有瀏覽器擴充工具,讓使用率較高的人更方便!)