[jQuery] Animation：使用 Textillate.js 製作文字動畫
〈1〉下載套件 Textillate.js 是一款強大的 jQuery 文字套件，可以輕鬆創建想要的動畫文字效果。
它能實現基於 animate.css CSS3 動畫庫中的所有動畫，而 animate.css 預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 60 多種文字動畫效果。配合 animate.css、fittext、lettering 一起使用，這樣做出來的文字特效很完美。
下載套件 ☞ http://textillate.js.org/
〈2〉核心文件
- animate.css ( CSS3動畫庫 )
- jquery.fittext.js ( 文字有更良好的自適應寬度 )
- jquery.lettering.js ( 將文字用特定的方式拆開，並自訂樣式 )
- jquery.textillate.js ( 集成了一些很棒的動畫效果的函式庫 )
〈3〉方法與事件 ☞ textillate.js 文字動畫/參數詳解
☞ Textillate.js 方法與事件
☞ Having multiple words cycle through using Textillate JS
〈4〉基礎用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Textillate.js</title>
<link href="assets/animate.css" rel="stylesheet" />
<link href="assets/style.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css' />
<body>
<div class="jumbotron">
<div class="container">
<h1 class="tlt">textillate.js</h1>
</div>
</div>
<!-- java script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>
<script>
$(function (){
$('.tlt').textillate();
});
</script>
</body>
</html>
- <h1 class="tlt" data-in-effect="特效名稱">Title</h1>
- $('.tlt').textillate();
〈5〉完整範例下載 ☞ A SIMPLE AND EASY JQUERY PLUGIN FOR CSS ANIMATED PAGE TRANSITIONS.
☞ textillate.js example
〈6〉補充 ☞ 文字編排
☞ Transit
☞ Demo: Create a CSS Flipping Animation
☞ circulate
☞ beautiful background image navigation with jquery
☞ 20 jQuery Typography & Text Effect Plugins
☞ 30 jQuery Text Effect Libraries You Need To Know
☞ 47 Amazing CSS3 Animation Demos
☞ 讓網站動起來！12款優秀的 jQuery 動畫插件推薦
Source
☞ 男丁格爾 | [jQ]Lettering.JS 0.6☞ FitText 從此擺脫擾人的 font-size
☞ FitText 官網
沒有留言: