jquery使用CSS3实现文字动画效果插件Textillate.js

jquery使用CSS3实现文字动画效果插件Textillate.js

 

Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件。Textillate.js集成了一些很棒的使用CSS3动画效果的?JavaScript?库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字。

Textillate

使用方法

引入核心文件

<link?href="assets/animate.css"?rel="stylesheet">
<script?src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script>
<script?src="assets/jquery.lettering.js"></script>

构建html标签

<h1 class="tlt">My Title</h1>

写入JS,初始化

$(function?()?{
????$('.tlt').textillate();
})

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

<h1 class="tlt" data-in-effect="rollIn">Title</h1>

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

$('.tlt').textillate({ in: { effect: 'rollIn' } });

当然,你也可以用Textillate给一个列表的文字都具有动画

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

 

未经允许不得转载:小月博客 » jquery使用CSS3实现文字动画效果插件Textillate.js
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(0) 打赏

评论3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #3
    闲着没事,随便逛逛,心静自然凉。
    我赚啦2017-04-28 15:13:32回复
  2. #2
    你的博客让人流连忘返!
    增达网2017-04-27 8:37:58回复
  3. #1
    我只想默默的拜读您的博客!
    xuan2017-04-25 14:20:54回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏