jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于CSS3动画效果的JavaScript库，您可非常轻轻松地把这些动画效果应该于网页中的任何文字。
使用方法
引入核心文件
构建html标签
My Title
写入JS，初始化
$(function(){
$('.tlt').textillate();
})
以上代码使用了默认的动画效果，如果你想改变动理效果，可以在html中调用data API
Title
你也可以在初始化时使用参数来改变
$('.tlt').textillate({ in: { effect: 'rollIn' } });
当然，你也可以用Textillate给一个列表的文字都具有动画
SomeTitleAnotherTitle
$('.tlt').textillate();
注意：你可以通过调用data api配置动画参数来控制每个li的动画效果。
参数选项
$('.tlt').textillate({
//thedefaultselectortousewhendetectingmultipletextstoanimate
selector:'.texts',
//enablelooping
loop:false,
//setstheminimumdisplaytimeforeachtextbeforeitisreplaced
minDisplayTime:2000,
//setstheinitialdelaybeforestartingtheanimation
//(notethatdependingontheineffectyoumayneedtomanuallyapply
//visibility:hiddentotheelementbeforerunningthisplugin)
initialDelay:0,
//setwhetherornottoautomaticallystartanimating
autoStart:true,
//customsetof'in'effects.Thiseffectswhetherornotthe
//characterisshown/hiddenbeforeorafterananimation
inEffects:[],
//customsetof'out'effects
outEffects:['hinge'],
//inanimationsettings
in:{
//settheeffectname
effect:'fadeInLeftBig',
//setthedelayfactorappliedtoeachconsecutivecharacter
delayScale:1.5,
//setthedelaybetweeneachcharacter
delay:50,
//settotruetoanimateallthecharactersatthesametime
sync:false,
//randomizethecharactersequence
//(notethatshuffledoesn'tmakesensewithsync=true)
shuffle:false,
//reversethecharactersequence
//(notethatreversedoesn'tmakesensewithsync=true)
reverse:false,
//callbackthatexecutesoncetheanimationhasfinished
callback:function(){}
},
//outanimationsettings.
out:{
effect:'hinge',
delayScale:1.5,
delay:50,
sync:false,
shuffle:false,
reverse:false,
callback:function(){}
},
//callbackthatexecutesoncetextillatehasfinished
callback:function(){}});
事件
start.tlt– textillate开始时触发
inAnimationBegin.tlt– 动画进入开始时触发
inAnimationEnd.tlt– 动画进入结束时触发
outAnimationBegin.tlt– 动画退出开始时触发
outAnimationEnd.tlt– 动画退出结束时触发
end.tlt– ttextillate结束触发
方法
$element.textillate(‘start’)– 手动开始或重启 textillate
$element.textillate(‘stop’)– 手动暂停或停止 textillate
$element.textillate(‘in’)– 当前文字动画进入时触发
$element.textillate(‘out’)– 当前文字动画退出时触发
