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