CSS3テキストアニメーションのjQueryプラグインTextillate.js

Textillate.jsは、Lettering.jsを使ったCSS3テキストアニメーションのシンプルなjQueryプラグインです。今回はこの定番Textillate.jsの使い方のメモです。

Textillate.jsは、テキストにちょっとした動きを簡単に実装できます。シンプルですが、ループ、Delay、エフェクトの種類などいろいろあるので、いろいろと遊べそうです。

本家サイト
textillate.js

依存ライブラリ

• jQuery
• Animate.css
• Lettering.js

上記依存ライブラリとtextillate.jsを使用するページで読み込みます。

html<link href="...path_to_file.../animate.css" rel="stylesheet">
...
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="...path_to_file.../jquery.lettering.min.js"></script>
<script src="...path_to_file.../jquery.textillate.min.js"></script>

使い方

まず基本のマークアップ

HTML<p class="sample">Once in a Blue Moon</p>

JS$('.sample').textillate();

JavaScriptはこんな感じで、デフォルト設定の動きになります。

■デフォルト設定の変更は、データ属性を使うことができます。

HTML<p class="sample2" data-in-effect="rollIn">Once in a Blue Moon</p>

■あるいは、JSで初期化オプションにセットします。

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

箇条書きリストもまとめてtextillate

animate.css の感覚でマークアップできます。

HTML<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>

※デフォルトの複数セレクターは ".texts"

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

See the Pen
textillate by Saki (@SAKI)
on CodePen.

■エフェクトの種類は、以下より確認できます。
textillate.js
Animate.css

オプション

readmeより

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

イベント

readmeより

• start.tlt - triggered when textillate starts
• inAnimationBegin.tlt - triggered when the in animation begins
• inAnimationEnd.tlt - triggered when the in animation ends
• outAnimationBegin.tlt - triggered when the out animation begins
• outAnimationEnd.tlt - triggered when the in animation ends
• end.tlt - triggered when textillate ends

code$('.tlt').on('inAnimationBegin.tlt', function () {
// do something
});