jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于CSS3动画效果的 JavaScript 库，您可非常轻轻松地把这些动画效果应该于网页中的任何文字。
使用方法
引入核心文件
构建html标签
My Title
写入JS，初始化
$(function () {
$('.tlt').textillate();
})
以上代码使用了默认的动画效果，如果你想改变动理效果，可以在html中调用data API
Title
你也可以在初始化时使用参数来改变
$('.tlt').textillate({ in: { effect: 'rollIn' } });
当然，你也可以用Textillate给一个列表的文字都具有动画
- Some Title
- Another Title
$('.tlt').textillate();
注意：你可以通过调用data api配置动画参数来控制每个li的动画效果。
参数选项
$('.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 () {}});
事件
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’) – 当前文字动画退出时触发
)
