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 动画。