有沒有聽過視差滾動這個詞？網頁上帶有視差滾動的效果，可以讓網站更為吸睛喔！

什麼是滾動視差？

隨著滑鼠的滾動，讓頁面部分的元素隨滑鼠滾動速度進行移動，所以滑鼠快速移動的話，也會有快速的物件移動，其中元素可能包含圖片、文字、背景、按鈕...等等。簡單來說就是當滑鼠滾動時，可以順帶控制某些物件的消失及顯示。
設置好物件不同的滾動設定，就可以打造出好看有趣的畫面！

方向

1. 垂直
   這應該是最常見、最直覺的方向，也會電商中比較常用的方式。
2. 橫向
   對於少品項、簡潔扼要的內容要適合，有助於彰顯產品。
3. 中心
   有些特殊頁面會使用中心向，或是以中心為基準點做出小浮動。

效果

1. 鎖定不動的背景
   這是一個最簡單的方法，就是一區塊使用背景並鎖住位置不動，而隨著滑鼠滾動，會將照片由下往上被蓋過。
2. 滑進與滑出時產生動畫
   在滑進時，產生物件漸進漸岀等動畫。
3. 物件間使用不同移動速度
   在下滑時，有些物件會跑得比其他物件速度快，彼此速度不同，能營造物件的既視感。

範例

可以參考逛逛，感受滾動式差的魅力！

Zara 首頁

( 圖片來源：https://www.zara.com/tw/ )

zara的首頁以上下滑動展示圖片及頁尾，左右切換主題。

( 圖片來源：https://www.apple.com/tw/ipad-mini/ )

Apple對於商品頁面，近幾年以滾動視差來展示，可以觀察他們往下滑時，出現的動畫、物品的展示！

今天就介紹到這邊，希望大家有更加了解這樣類型的網站設計！