Textillate.js 实现文本动画

该插件基于jQuery和animate.css，在使用该插件之前，需要引入这两个文件

引入示例：

    <!-- animate.css -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- jquery.js -->
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <!-- 实现文本动画的其他3个JS文件 -->
    <script src="js/jquery.fittext.js"></script>
    <script src="js/jquery.lettering.js"></script>
    <script src="js/jquery.textillate.js"></script>

使用说明：

文本容器

<h1 class="tlt">文本容器，用jQuery的选择器选择<h1/>

插件初始化
方式一：HTML

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

方式二：JS

$('.tlt').textillate({
  // 默认的生成文本碎片的类名
  selector: '.texts',

  // 是否循环播放
  loop: false,

  // 进动画到出动画直接的时间，可以设置为0，进动画和出动画中间没有时间间隔
  minDisplayTime: 2000,

  // 动画延迟时间
  initialDelay: 0,

  // 是否自动播放
  autoStart: true,

  // 进动画特效
  inEffects: [],

  // 出动画特效
  outEffects: [ 'hinge' ],

  // 进动画各项配置
  in: {
    // 特效
    effect: 'fadeInLeftBig',

    // 延迟比例
    delayScale: 1.5,

    // 延迟
    delay: 50,

    // 每个文字碎片动画是否同步播放
    sync: false,

    // 每个文字碎片动画是否随机播放
    shuffle: false,

    // 反方向播放
    reverse: false,

    // 回调函数
    callback: function () {}
  },

  // out animation settings.
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },

  // 整个插件的回调函数
  callback: function () {},

  // set the type of token to animate (available types: 'char' and 'word')对中文来说，word意味着这个段落
  type: 'char'
});

插件事件：

• start.tlt- triggered when textillate starts，插件开始执行
• inAnimationBegin.tlt - triggered when the in animation begins，进动画开始
• inAnimationEnd.tlt - triggered when the in animation ends，进动画结束
• outAnimationBegin.tlt - triggered when the out animation begins，出动画开始
• outAnimationEnd.tlt - triggered when the out animation ends，出动画结束
• end.tlt - triggered when textillate ends，整个动画结束

插件方法

• $element.textillate(‘start’) - Manually start/restart textillate，开始动画
• $element.textillate(‘stop’) - Manually pause/stop textillate，结束动画
• $element.textillate(‘in’) - Trigger the current text’s in animation，开始进入动画
• $element.textillate(‘out’) - Trigger the current text’s out animation，开始出动画

特殊例子

<!--分步进出-->
<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>

插件下载地址
http://download.csdn.net/download/qq_34095777/10270875