iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

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

30天打造品牌特色電商網站 Day.27 實作滾動視差

製作滾動視差的動畫,使用 javascript 來製作是最為方便的!同時也可以找一些有人寫好的套件,就可以輕鬆製作不用學太多語法。


今天介紹一個可以快速使用的套件

AOS.js Animate On Scroll Library

在需要增加效果的 div 裡加入規定的效果名稱,在 javascript 裡呼叫 AOS 且能視情況設定參數,這邊簡單介紹一下:

效果名稱要放在 data-aos 裡

效果名稱可以包涵效果、方向

效果

  • fade 淡入淡出
  • flip 折疊式
  • zoom-in 放大進場
  • zoom-out 縮小進場

方向

  • up、down、right、left
    上下左右
  • up-right、up-left
    往右上、往左上
  • down-right、down-left
    往右下、往左下

範例

<div data-aos="fade-down"></div>
<div data-aos="fade-up-right"></div>

fade-down 表示滑動進入這個區塊時會往下淡入,
fade-up-right 表示滑動進入這個區塊時會往右上方淡入。


動畫持續時間放在 data-aos-duration

1000為一秒,不需要加上單位

範例

<div data-aos="fade-left" data-aos-duration="3000">
</div>

這個區塊會往左進入,從開始進入到完成會花 3 秒時間。


過某區塊,指定物件的動態使用 data-aos-anchor

在滑入的物件加上 id,當此物件滑過離開畫面時,會使data-aos-anchor 跟其 id 名稱一樣的物件實行物件的動畫效果。
另外可以使用 data-aos-anchor-placement 來決定滑到哪觸發及消失

範例

<div class=""
     data-aos="fade-right"
     data-aos-anchor="#triggerAnchor"
     data-aos-anchor-placement="top-bottom">
  Anchor
</div>
<div class="" id="triggerAnchor">Go</div>

當滑到 Go 的時候,會觸發 data-aos-anchor 等於 Go 的 id 的物件,也就是 Anchor那一塊。
top-bottom 會在滑到上方時觸發,滑到底部再收回,也就是 Go 滑到了上方,Anchor 會從右邊淡入,然後 Go 再滑到底部時,Anchor 會再反方向收回,也就是往左邊淡出。


以上是簡單讓物件隨著滾輪跟動的方法,事實上滾動視差可以有更深入更不一樣的設計。綜合AOS的功能並熟悉更多參數設定,也能讓網站活潑起來,產生不一樣的視覺效果!
以下附上 AOS 貼心的範例

AOS Demo:https://michalsnik.github.io/aos/

AOS github:https://github.com/michalsnik/aos

不只一個套件可以製作滾動視差效果,還有其他各式各樣能做出不同效果的好套件,大家可以多多嘗試!


上一篇
30天打造品牌特色電商網站 Day.26 瞭解滾動視差
下一篇
30天打造品牌特色電商網站 Day.28 網站分析工具
系列文
30天打造品牌特色電商網站30

尚未有邦友留言

立即登入留言