textillate.js是一款效果炫酷的jQuery和css3文字动画特效库插件。它通过结合其它一些动画库来制作各种CSS3文字动画特效。
如何使用
基本的html结构如下：
<h1 class="tlt">My Title</h1> |
在页面的头部引入jQuery和jquery.textillate.js文件。
<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script><script src="jquery.textillate.js"></script> |
然后就可以如下调用插件。
$(function () { $('.tlt').textillate();}) |
上面的方法将会使用默认参数来调用插件。要改变默认参数，你可以使用data-属性来设置新参数。
<h1 class="tlt" data-in-effect="rollIn">Title</h1> |
或者在初始化插件时设置参数：
$('.tlt').textillate({ in: { effect: 'rollIn' } }); |
你可以通过下面的方式来使 textillate.js 动画整个列表内容。
<h1 class="tlt"> <ul class="texts"> <li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li> <li data-in-effect="fadeIn">Another Title</li> </ul></h1> |
$('.tlt').textillate(); |
你可以使用data-属性来控制么一个列表项上的文本的动画效果。
插件依赖
textillate.js文字动画库插件依赖于下面的一些库文件：
可用参数
$('.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 // (note that depending on the in effect you may need to manually apply // visibility: hidden to the element before running this plugin) 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, // reverse the character sequence // (note that reverse doesn't make sense with sync = true) reverse: false, // callback that executes once the animation has finished callback: function () {} }, // out animation settings. out: { effect: 'hinge', delayScale: 1.5, delay: 50, sync: false, shuffle: false, reverse: false, callback: function () {} }, // callback that executes once textillate has finished callback: function () {}, // set the type of token to animate (available types: 'char' and 'word') type: 'char'}); |
事件
Textillate 会触发下面的事件。
- start.tlt：当textillate 开始动画时触发。
- inAnimationBegin.tlt：当 in 动画开始时触发。
- inAnimationEnd.tlt：当 in 动画结束时触发。
- outAnimationBegin.tlt：当 out 动画开始时触发。
- outAnimationEnd.tlt：当 out 动画结束时触发。
- end.tlt：当textillate 结束动画时触发。
方法
- $element.textillate(‘start’)：手动开始/重置textillate动画。
- $element.textillate(‘stop’)：手动暂停/停止textillate动画。
- $element.textillate(‘in’)：触发当前文字的 in 动画。
- $element.textillate(‘out’)：触发当前文字的 out 动画。
