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’)?– 當前文字動畫退出時觸發

總結

以上是生活随笔為你收集整理的html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。