30天打造品牌特色电商网站 Day.26 了解滚动视差

有没有听过视差滚动这个词？网页上带有视差滚动的效果，可以让网站更为吸睛喔！

什麽是滚动视差？

随着滑鼠的滚动，让页面部分的元素随滑鼠滚动速度进行移动，所以滑鼠快速移动的话，也会有快速的物件移动，其中元素可能包含图片、文字、背景、按钮...等等。简单来说就是当滑鼠滚动时，可以顺带控制某些物件的消失及显示。
设置好物件不同的滚动设定，就可以打造出好看有趣的画面！

方向

1. 垂直
   这应该是最常见、最直觉的方向，也会电商中比较常用的方式。
2. 横向
   对於少品项、简洁扼要的内容要适合，有助於彰显产品。
3. 中心
   有些特殊页面会使用中心向，或是以中心为基准点做出小浮动。

效果

1. 锁定不动的背景
   这是一个最简单的方法，就是一区块使用背景并锁住位置不动，而随着滑鼠滚动，会将照片由下往上被盖过。
2. 滑进与滑出时产生动画
   在滑进时，产生物件渐进渐岀等动画。
3. 物件间使用不同移动速度
   在下滑时，有些物件会跑得比其他物件速度快，彼此速度不同，能营造物件的既视感。

范例

可以参考逛逛，感受滚动式差的魅力！

Zara 首页

( 图片来源：https://www.zara.com/tw/ )

zara的首页以上下滑动展示图片及页尾，左右切换主题。

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

Apple对於商品页面，近几年以滚动视差来展示，可以观察他们往下滑时，出现的动画、物品的展示！

今天就介绍到这边，希望大家有更加了解这样类型的网站设计！