制作有吸引力的文字動畫效果-textillate.js
看過好萊塢電影的都知道它的特效都很棒,即使是文字效果也很細節,然而我們在網頁上使用這些特效最佳的方法就是用JavaScript來寫了,今天將和大家分享有關文字動畫jQuery插件和textillate.js一個實例教程,這些效果可能不是很常用,但有時候我們做專題或其它推廣頁面可以使用一下,至于能弄出什么效果,哪就要看你的想象力啦。
textillate.js文字實例
首先你可以看看textillate.js的官方演示頁,里面有很多效果展示出來。
下面我也利用textillate.js制作了一個簡單的文字動畫頁面,歡迎拍磚……
先看看實例吧:設計達人版 Demo演示 →
還有多少動畫效果?請查看Animate.css網站。
教程代碼講解
STEP:1 加載所需必要的JS和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
Sliding Letters
3D Flying Text
Codename Rainbows
Textualizer
最后最后
好吧,剩下的就交給你了。發揮你的創意和想像力吧!
贊助商鏈接喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。+ 添加評論3 Responses to “制作有吸引力的文字動畫效果-textillate.js”
你的例子稍微改一下頭部,去掉就可以兼容了
只有從左邊進入的效果嘛???有沒有其他的進入效果???
嗯,的確不錯??上Р粫﨡S,要是只用CSS3就能做出就好啦。