制作有吸引力的文字动画效果-textillate.js

看过好莱坞电影的都知道它的特效都很棒，即使是文字效果也很细节，然而我们在网页上使用这些特效最佳的方法就是用JavaScript来写了，今天将和大家分享有关文字动画jQuery插件和textillate.js一个实例教程，这些效果可能不是很常用，但有时候我们做专题或其它推广页面可以使用一下，至于能弄出什么效果，哪就要看你的想象力啦。

textillate.js文字实例

首先你可以看看textillate.js的官方演示页，里面有很多效果展示出来。

下面我也利用textillate.js制作了一个简单的文字动画页面，欢迎拍砖……

先看看实例吧： Demo演示 →

还有多少动画效果？请查看Animate.css网站。

教程代码讲解

STEP:1 加载所需必要的JS和CSS文件

<link href="assets/animate.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="assets/jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>

STEP2:

基本HTML代码

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

添加javascript代码

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

添加动画效果，看data属性就是roolIn就是动画名称了。

<h1 class="ef" data-in-effect="rollIn">Tittle</h1>

另外你可以参考下面详细的设定：

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

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

就这样了，简单吧？需要注意的就是这个使用了CSS3动画，所以某些浏览器是不支持哦！