textillate-jQuery和css3文字动画特效库_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

textillate.js是一款效果炫酷的jQuery和css3文字动画特效库插件。它通过结合其它一些动画库来制作各种CSS3文字动画特效。

如何使用

基本的html结构如下：

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

在页面的头部引入jQuery和jquery.textillate.js文件。

<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.textillate.js"></script>

然后就可以如下调用插件。

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

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

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

或者在初始化插件时设置参数：

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

你可以通过下面的方式来使 textillate.js 动画整个列表内容。

<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-属性来控制么一个列表项上的文本的动画效果。

插件依赖

textillate.js文字动画库插件依赖于下面的一些库文件：

可用参数

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

  // set the type of token to animate (available types: 'char' and 'word')
  type: 'char'
});