textillate.js

Posted 2020-10-08 无名码农

在页面的头部引入jQuery和jquery.textillate.js及一些依赖文件，如下：

<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>

调用插件：

$(function () {
    $(‘.tlt‘).textillate();
})

上面的方法将会使用默认参数来调用插件。要改变默认参数，你可以使用data-属性来直接设置新参数：

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

当然要想灵活使用复杂效果的话，最好还是要了解他的可用参数：

<script type="text/javascript">
    //初始化插件，修改参数
    $(‘.tlt‘).textillate({
  //当检测到多个文本动画时使用的默认选择器
  selector: ‘.tlt‘,
 
  // 启用循环
  loop: false,
 
  // 在替换之前设置每个文本的最小显示时间
  minDisplayTime: 2000,
 
  // 在开始动画之前设置初始延迟
  // (请注意，根据实际情况，您可能需要在运行此插件之前手动应用visibility: hidden属性来隐藏元素)
  initialDelay: 0,
 
  // 设置是否自动开始动画
  autoStart: true,
 
  // 定制的“in”效果。 无论角色是否在动画之前或之后显示/隐藏，都会产生影响  
  inEffects: [],
 
  // 定制的“out”效果
  outEffects: [ ‘hinge‘ ],
 
  // in 动画设置
  in: {
    // 设置效果名称
    effect: ‘fadeInLeftBig‘,
 
    // 设置应用于每个连续字符的延迟因子
    delayScale: 1.5,
 
    // 设置每个字符之间的延迟
    delay: 50,
 
    // 设置为true来同时为所有角色设置动画
    sync: false,
 
    // 随机化字符序列
    // (请注意，shuffle在sync = true时没有意义)
    shuffle: false,
 
    // 反转字符序列
    // (请注意，在sync = true时，反向没有任何意义)
    reverse: false,
 
    // 动画完成后执行的回调
    callback: function () {}
  },
 
  // out 动画设置。
  out: {
    effect: ‘hinge‘,
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },
 
  // 一旦textillate完成，就执行回调
  callback: function () {},
 
  // 设置标记动画的类型 (可用类型:"char"和"word")
  type: ‘char‘
});            
</script>

可用效果如下：

shakeflashswingbouncetadawobblepulse

flipflipInXflipOutXflipInYflipOutY

fadeInfadeInUpfadeInDownfadeInLeftfadeInRightfadeInUpBigfadeInDownBigfadeInLeftBigfadeInRightBig

fadeOutfadeOutUpfadeOutDownfadeOutLeftfadeOutRightfadeOutUpBigfadeOutDownBigfadeOutLeftBigfadeOutRightBig

slideInDownslideInLeftslideInRightslideOutUpslideOutLeftslideOutRight

bounceInbounceInDownbounceInUpbounceInLeftbounceInRight

bounceOutbounceOutDownbounceOutUpbounceOutLeftbounceOutRight

rotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRight

rotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRight

lightSpeedInlightSpeedOuthingerollInrollOut

查看演示

事件

Textillate 会触发下面的事件。

• start.tlt：当textillate 开始动画时触发。
• inAnimationBegin.tlt：当 in 动画开始时触发。
• inAnimationEnd.tlt：当 in 动画结束时触发。
• outAnimationBegin.tlt：当 out 动画开始时触发。
• outAnimationEnd.tlt：当 out 动画结束时触发。
• end.tlt：当textillate 结束动画时触发。

方法

• $element.textillate(‘start‘)：手动开始/重置textillate动画。
• $element.textillate(‘stop‘)：手动暂停/停止textillate动画。
• $element.textillate(‘in‘)：触发当前文字的 in 动画。
• $element.textillate(‘out‘)：触发当前文字的 out 动画。