網頁動態效果—視差滾動案例
視差滾動是增加網頁設計深度的技術之一，網頁設計師自2011年起使用CSS 、HTML製作該效果，視差滾動發展至今，受到廣泛設計師的喜愛，也變化出各式各樣的樣貌。本文將先陳述視差滾動的歷史與原理，並舉數個例子分析視差滾動在近幾年的網頁應用。
什麼是視差滾動？
視差滾動（parallax scrolling）是指在滑鼠滾動時，網頁背景的動態較前景來得快，兩者的速度差造成視覺上的深度錯覺，達成3D效果。視差（parallax）最早來自於1981年的街機遊戲，在2D的平面遊戲中，遊戲設計師讓角色移動得較快，背景（如山）移動得較慢，介於兩者之間的中間物件（如房子）則使用介於兩者之間的速度，如此一來平面的畫面便有了深度。
若是難以想像以上敘述，相信有不少人都玩過平面的瑪莉歐吧！該遊戲中也利用了視差的技術。或是想像一下我們在搭火車，看向窗戶外頭時，會發現離我們較近的交通號誌快速略過眼前，離我們比較遠的山和雲在我們眼中卻幾乎沒怎麼動，視差滾動的原理即是如此。
視差滾動的網頁應用案例
第一、二張圖是較常見的視差滾動類型，利用了多層次的速度差異，第三張圖則進一步搭配線條的延伸，引導視覺。該網頁中除了視差滾動，也搭配精緻的圖案，運用了非常多動態效果，網頁相當長，介紹設計的歷史，不論是視覺或是文字內容，都值得仔細欣賞學習。
首頁的建築照片及文字的對比產生空間感，另外，網頁使用較大的襯線字體，與圖片的交錯動態效果顯得高級時尚。
3. Delassus
網站首頁使用橫向的視差滾動，呈現每一項物體與文字之間的速度差異，點進DISCOVER後亦有直向的視差滾動效果，且物體會因為滑鼠移動而產生位移，帶給使用者有趣的互動體驗。
除了視差滾動，還有3D物件的旋轉變化，並使用文字動態效果，在圖片上運用波浪形轉場，整體簡潔卻充滿動態細節。
5. Gucci Zumi
最後想分享的是Gucci Zumi的網頁，瀏覽這個網頁的感覺就像是看繪本一樣，在使用者滑動滾輪時，會越過一扇扇門窗與包包，背景和前景的動態搭配極為巧妙，搭配復古的插畫和一直在畫面上的紫色泡泡，就像走進了奇幻世界。（該網頁的螢幕錄影因為檔案較大，無法上傳，建議進入網頁欣賞！）
