jquery使用CSS3實現文字動畫效果插件Textillate.js

Textillate是一款基於jquery的使用CSS3實現文字動畫的小巧插件。Textillate.js集成了一些很棒的使用CSS3動畫效果的 JavaScript 庫，您可非常輕輕松地把這些動畫效果應該於網頁中的任何文字。

Textillate 下載          案例演示

使用方法

引入核心文件

<link href="assets/animate.css" rel="stylesheet">
<script src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script>
<script src="assets/jquery.lettering.js"></script>

構建html標簽

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

寫入JS，初始化

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

 

以上代碼使用了默認的動畫效果，如果你想改變動理效果，可以在html中調用data API

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

你也可以在初始化時使用參數來改變

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

當然，你也可以用Textillate給一個列表的文字都具有動畫

<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 api配置動畫參數來控制每個li的動畫效果。

參數選項

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

 

事件

• start.tlt – textillate開始時觸發
• inAnimationBegin.tlt – 動畫進入開始時觸發
• inAnimationEnd.tlt – 動畫進入結束時觸發
• outAnimationBegin.tlt –  動畫退出開始時觸發
• outAnimationEnd.tlt – 動畫退出結束時觸發
• end.tlt – ttextillate結束觸發

方法

• $element.textillate(‘start’) – 手動開始或重啟 textillate
• $element.textillate(‘stop’) – 手動暫停或停止 textillate
• $element.textillate(‘in’) – 當前文字動畫進入時觸發
• $element.textillate(‘out’) – 當前文字動畫退出時觸發