iT邦幫忙

2019 iT 邦幫忙鐵人賽

0
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 32

[蛻變事實-隨手帳] AOS.js / Animate.css -網頁動畫套件 (超簡易版)

每次看到別人的網站有動態,總覺得好厲害!
是真的會~哇!!!!/images/emoticon/emoticon24.gif(好厲害!!!)

直到最近把靜態頁切完後,
還是很想讓網站畫面能有 "動態效果"
才發現原來........根本不難嘛!!!!@@

今天就來整理&來分享

視覺設計師也能擁有帥帥的網頁動態! (無難度、不看可惜)

/images/emoticon/emoticon12.gif/images/emoticon/emoticon12.gif/images/emoticon/emoticon12.gif


Animate.css

網站Github資料

很多年前就知道 [ Animate.css ] CSS動態,只要加入這個css就可以讓自己的畫面有動畫啦!

最起初我也只會呆呆的用,來增加一些效果~ 也就滑入、滑出、淡入、淡出..

套用方法:

  1. Animate官網下載 Animate.css
  2. 將Animate.css載入至頁面中
// 放置HTML <head> 內
<link rel="stylesheet" type="text/css" href="animate.css">
  1. 在需要有動態的標籤上加入 CSS,如:
// class="animated XXXXX" 第一個"animated",第二個是依你想要的效果動態名稱
<body>
  <div id="frog" class="animated bounceInDown"></div>
</body>

效果如下圖:
animate效果圖

  1. 若要指定動態效果的時間/延遲/次數...等等,就另外加入CSS設定,如:
<style>
#frog{
  width:46px;
  height:45px;
  animation-iteration-count: infinite; /*設定該特效次數,infinite代表無限。*/
}
</style>

加上CSS動畫屬性設定,整個網頁動態就更完美了!
(參考:W3CMDN CSS動畫
屬性列表:

屬性 說明
animation-name 動畫名稱
animation-duration 動畫持續時間,預設 0,單位 s 或 ms。
animation-delay 動畫延遲播放時間,預設 0,單位 s 或 ms。
animation-iteration-count 動畫播放次數,預設 1。其他還有 infinite...
animation-timing-function 動畫加速度函式,預設 ease。其他還有: linear、ease-in、ease-out、ease-in-out、step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)。
animation-direction 動畫播放方向,預設 normal。其他還有 reverse、alternate、alternate-reverse。
animation-fill-mode 動畫播放前後模式,預設 none。其他還有 forwards、backwards、both。
animation-play-state 動畫播放或暫停狀態,預設 running。其他還有 paused。

AOS.js

滾軸觸發效果的動畫

網站Github資料Codepen DEMO

滾軸觸發效果的動畫應該是網頁動畫中最基本的需求,但我從沒研究過~
因為之前總覺得應該不簡單,但我說好要認真、?發向上的學習前端的!
加上我也好想要讓網頁有動態喔~/images/emoticon/emoticon24.gif
也就認真的亂胡下關鍵字在網路上搜尋。結果看到一篇文章在寫AOS.js,還真的超簡單套用的!/images/emoticon/emoticon04.gif

  1. AOS官網下載所需資料(在網頁最下方有檔案)
  2. 將AOS載入至頁面中 (網站上也有使用YARN,NPM,BOWER安裝方法)
// CSS放置HTML <head> 內
<link href="../dist/aos.css" rel="stylesheet">

// JS放置 </body> 結束標籤前加入以下二筆資料,一個連結JS檔,一個是設定
<script src="../dist/aos.js"></script>

// AOS.init(); 是什麼都不設定也要加入的!才會有作用喔!
<script>
    AOS.init();
</script>

  1. 在需要有動態的標籤上加入設定,如:

    (詳細參考官網)

心得

使用Animate
1.我會考量到,同一畫面沒有太多物件交換做效果 ,不然要單一單一調整視覺時間,就要調上很久很久~
2. 無需scroll觸發才做的動態! 但若是需要的話,可以加入自己寫的JQ做搭配,但本人還不太會 T"T

使用AOS.js
是我第一次使用的!滾輪滾回去的時候他會回到起始點當滾輪在滾下來時重複播放動畫,這樣子的功能讓我覺得蠻喜歡的。(不會寫 JS 時有這樣的資料庫就很好用XD)

而且效果一加入簡值將自己提升了好幾十分!
突然覺得離前端工程師這專業名稱不遠了 XD (即使是自我開心也好 ) /images/emoticon/emoticon07.gif

參考資料


上一篇
[蛻變事實-隨手帳] JQ套件-左右滑動效果(手勢版)
下一篇
[蛻變事實-隨手帳] 瀏覽器BUG-Safari 問題小筆記
系列文
蛻變事實-UI設計師勇闖前端城35

尚未有邦友留言

立即登入留言