html5文字飞入插件,jquery使用css3实现文字动画效果插件textillate.js -凯发k8官方网

jquery使用css3实现文字动画效果插件textillate.js

textillate是一款基于css3动画效果的 javascript 库，您可非常轻轻松地把这些动画效果应该于网页中的任何文字。

使用方法

引入核心文件

构建html标签

写入js，初始化

$(function () {

$('.tlt').textillate();

})

以上代码使用了默认的动画效果，如果你想改变动理效果，可以在html中调用data api

你也可以在初始化时使用参数来改变

$('.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’) – 当前文字动画退出时触发

总结

以上是凯发k8官方网为你收集整理的html5文字飞入插件,jquery使用css3实现文字动画效果插件textillate.js的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。