Textillate.js – 實現動感的 CSS3 文本動畫的簡單插件

Textillate.js – 實現動感的 CSS3 文本動畫的簡單插件（用法詳情&只支持現代瀏覽）動態的文字效果。

第一步：

    當然是下載插件，下載地址（https://github.com/jschr/textillate）；

第二步：

    當然是引用文件，此插件是基于 jquery的所以你的項目中必須包含 jquery插件（這個簡單自己下吧），然后就是把 它的必要文件引入！

<link rel="stylesheet" href="css/animate.css" /> //css文件

 <script src="textJs/jquery.fittext.js"></script>
 <script src="textJs/jquery.lettering.js"></script>
 <script src="textJs/jquery.textillate.js"></script>//(注意這幾個文件最好放在最后面引入)

第三步：

    用法 html中 

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

    js中

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

第四步：配置

$('.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 () {}});