iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

30天打造品牌特色電商網站系列 第 26

30天打造品牌特色電商網站 Day.26 瞭解滾動視差

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


什麼是滾動視差?

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

方向

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

效果

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

範例

可以參考逛逛,感受滾動式差的魅力!

Zara 首頁

https://ithelp.ithome.com.tw/upload/images/20211011/20141820DDy8594Clx.png

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

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


https://ithelp.ithome.com.tw/upload/images/20211011/20141820MQHl0oN97b.png

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

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


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


上一篇
30天打造品牌特色電商網站 Day.25 電商必用的提示-實作小範例
下一篇
30天打造品牌特色電商網站 Day.27 實作滾動視差
系列文
30天打造品牌特色電商網站30

尚未有邦友留言

立即登入留言