iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 4
1
Modern Web

前端UI軍火庫系列 第 4

[Day 04]Animate.css - 1秒鐘為你的網站加上動畫特效

過去我們要為網站加上動畫特效可能需要寫一大串的JavaScript,隨著web技術越來越發達,在CSS3中也加入了一系列的動畫屬性,以減少程式撰寫的成本;不過還是需要進行不少設定,而Animate.css就是一個幫你把一堆常見的特效打包好的CSS library。

使用Animate.css

一樣的,你可以使用CDN或NPM來取得Animate.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

大多數的library都是一樣的步驟,官方的說明文件也很清楚,所以之後就不再介紹前置的設定,以免有灌水嫌疑XD

Animate.css內建了超過70種的動畫效果,要套用特效前必須先在要套用的特效加上animated這個class,然後再加上你想要的特效class,例如想要像果凍一樣彈跳的特效,程式碼看起來就會像這樣

<div id="target" class="animated jello">
  <h1>
    鐵人萬歲!
  </h1>
</div>

只要用瀏覽器打開你的頁面,立刻就可以看到彈跳的效果囉!

如果希望自行觸發特效,例如按下按鈕之類的話,也可以動態的在事件發生時替你要產生特效的目標加上class

  $('#button').click(function(){
    $('#target').addClass('animated jello')
  });

不過這樣動畫只會發生一次,如果希望每次事件發生都觸發動畫的話,也可以在特效結束時把這兩個class移除掉:

  $('#target').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
  	$('#target').removeClass('animated jello');
  });

這麼一來每次按下按鈕就都會觸發特效囉!

以下是今天的程式demo: https://jsfiddle.net/wellwind/zt72Lbps/

關於每種特效想要瀏覽,可以直接上官網看看: https://daneden.github.io/animate.css/

類似資源

Hover.css: 著重在滑鼠移到元素上時才會產生的特效。

文章同步發表於: https://dotblogs.com.tw/wellwind/2016/12/04/front-end-animate-css

不正經閒聊

1秒加動畫很厲害,可以1秒變格格嗎?(看不懂請看影片: https://www.youtube.com/watch?v=aqNsaEL-wM4)


上一篇
[Day 03]Office UI Fabric - 打造與Office365相同樣式的UI框架
下一篇
[Day 05]WOW.js - 動畫很炫,也要看得到才行啊!
系列文
前端UI軍火庫31

尚未有邦友留言

立即登入留言