制作有吸引力的文字動畫效果-textillate.js

Sponsor

看過好萊塢電影的都知道它的特效都很棒，即使是文字效果也很細節，然而我們在網頁上使用這些特效最佳的方法就是用JavaScript來寫了，今天將和大家分享有關文字動畫jQuery插件和textillate.js一個實例教程，這些效果可能不是很常用，但有時候我們做專題或其它推廣頁面可以使用一下，至于能弄出什么效果，哪就要看你的想象力啦。

textillate.js文字實例

首先你可以看看textillate.js的官方演示頁，里面有很多效果展示出來。

下面我也利用textillate.js制作了一個簡單的文字動畫頁面，歡迎拍磚……

先看看實例吧：設計達人版 Demo演示 →

還有多少動畫效果？請查看Animate.css網站。

教程代碼講解

STEP:1 加載所需必要的JS和CSS文件

• jQuery
• lettering.js
• animate.css

<link href="assets/animate.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="assets/jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script> 

STEP2:

基本HTML代碼

<h1 class="tlt">My Title</h1>

添加javascript代碼

$('.ef').textillate({ in: { effect: 'rollIn' } });

添加動畫效果，看data屬性就是roolIn就是動畫名稱了。

<h1 class="ef" data-in-effect="rollIn">Tittle</h1>

另外你可以參考下面詳細的設定：
$('.tlt').textillate({
  // the default selector to use when detecting multiple texts to animate
  selector: '.texts',

  // enable looping
  loop: false,

  // sets the minimum display time for each text before it is replaced
  minDisplayTime: 2000,

  // sets the initial delay before starting the animation
  initialDelay: 0,

  // set whether or not to automatically start animating
  autoStart: true,

  // custom set of 'in' effects. This effects whether or not the
  // character is shown/hidden before or after an animation
  inEffects: [],

  // custom set of 'out' effects
  outEffects: [ 'hinge' ],

  // in animation settings
  in: {
    // set the effect name
    effect: 'fadeInLeftBig',

    // set the delay factor applied to each consecutive character
    delayScale: 1.5,

    // set the delay between each character
    delay: 50,

    // set to true to animate all the characters at the same time
    sync: false,

    // randomize the character sequence
    // (note that shuffle doesn't make sense with sync = true)
    shuffle: false
  },

  // out animation settings.
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
  }
});

就這樣了，簡單吧？需要注意的就是這個使用了CSS3動畫，所以某些瀏覽器是不支持哦！
其它文字特效jQuery插件
Shuffle Letters Effect

Demo演示

插件下載頁
Sliding Letters

Demo演示
3D Flying Text

Demo演示

插件下載頁
Codename Rainbows

Demo鏈接
Textualizer


Demo演示
最后最后
好吧，剩下的就交給你了。發揮你的創意和想像力吧！

    				   
推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com

交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。
    

	贊助商鏈接
	


 


					
與 css、CSS3、javascript、jQuery 相關的文章
					

												

							

							
							
							
							
							
使用 css 代碼畫一只玉兔，迎中秋佳節
							
													

							

							
							
							
							
							
CSS border-radius 新玩法(含可視化生成工具)
							
													

							

							
							
							
							
							
Tippy.js 玩轉鼠標懸停提示信息
							
													

							

							
							
							
							
							
CSS 或 srcset 讓瀏覽器自動切換 1X/2X/3X 圖像
							
													

							

							
							
							
							
							
小創意：圣誕球切換開關
							
													

							

							
							
							
							
							
給網站增加交互音效 – Loud links輕量插件
							
										


贊助商鏈接










                    

                   	喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。

                   	版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。