はじめに
textillate.jsは、テキストに簡単にアニメーション効果を追加できるjQueryプラグインです。文字単位でのフェードインやスライドインなど、様々なアニメーション効果を実現できます。この記事では、textillate.jsの基本的な使い方からカスタマイズ方法まで詳しく解説します。
導入方法
textillate.jsを使用するには、以下のライブラリを読み込む必要があります：
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Lettering.js -->
<script src="jquery.lettering.js"></script>
<!-- Animate.css -->
<link href="animate.css" rel="stylesheet">
<!-- Textillate.js -->
<script src="jquery.textillate.js"></script>
基本的な使い方
HTMLの記述
<h1 class="tlt">Hello World!</h1>
JavaScriptでの初期化
$(function() {
$('.tlt').textillate();
});
アニメーションのカスタマイズ
1. デフォルト設定の変更
プラグイン全体のデフォルト設定を変更する場合：
$.fn.textillate.defaults = {
selector: '.texts',
loop: false,
minDisplayTime: 1000,
initialDelay: 0,
in: {
effect: 'fadeIn',
delayScale: 1,
delay: 30,
sync: false,
reverse: false,
shuffle: false,
callback: function () {}
},
out: {
effect: 'fadeOut',
delayScale: 1,
delay: 30,
sync: false,
reverse: false,
shuffle: false,
callback: function () {}
},
autoStart: true,
type: 'char'
};
2. 個別要素への設定
HTML要素に直接データ属性で設定する場合：
<h1 class="tlt"
data-in-effect="fadeIn"
data-in-delay="50"
data-in-delay-scale="1.5"
data-in-sync="false"
data-in-shuffle="true">
Hello World!
</h1>
3. JavaScript初期化時の設定
$('.tlt').textillate({
loop: true,
in: {
effect: 'fadeInUp',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: true
},
out: {
effect: 'fadeOutDown',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: true
}
});
主要パラメータの説明
基本設定
| パラメータ | 説明 | デフォルト値 |
|---|---|---|
selector |
テキストを含む要素のセレクタ | .texts |
loop |
アニメーションをループさせるか | false |
minDisplayTime |
テキスト表示の最小時間（ミリ秒） | 1000 |
initialDelay |
初期遅延時間（ミリ秒） | 0 |
autoStart |
自動開始するか | true |
type |
アニメーション単位（'char'または'word'） | 'char' |
アニメーション設定（in/out共通）
| パラメータ | 説明 | デフォルト値 |
|---|---|---|
effect |
アニメーション効果 |
'fadeIn'/'fadeOut'
|
delayScale |
遅延時間の倍率 | 1 |
delay |
基本遅延時間（ミリ秒） | 30 |
sync |
同期アニメーションにするか | false |
shuffle |
ランダム順でアニメーションするか | false |
reverse |
逆順でアニメーションするか | false |
使用可能なエフェクト
Animate.cssで提供される以下のエフェクトが使用可能です：
入場エフェクト
- fadeIn
- fadeInUp
- fadeInDown
- fadeInLeft
- fadeInRight
- fadeInUpBig
- fadeInDownBig
- fadeInLeftBig
- fadeInRightBig
- bounceIn
- bounceInDown
- bounceInUp
- bounceInLeft
- bounceInRight
など
退場エフェクト
- fadeOut
- fadeOutUp
- fadeOutDown
- fadeOutLeft
- fadeOutRight
- bounceOut
- bounceOutDown
- bounceOutUp
- bounceOutLeft
- bounceOutRight
など
実践的な使用例
1. シンプルなフェードイン
<h1 class="fade-in">Welcome to my website</h1>
<script>
$('.fade-in').textillate({
in: {
effect: 'fadeIn',
delayScale: 1.5,
delay: 50,
sync: false
}
});
</script>
2. ループするアニメーション
<h1 class="loop-animation">Animated Text</h1>
<script>
$('.loop-animation').textillate({
loop: true,
in: {
effect: 'bounceIn',
delayScale: 1.5,
delay: 50
},
out: {
effect: 'bounceOut',
delayScale: 1.5,
delay: 50
}
});
</script>
3. ランダムな文字アニメーション
<h1 class="random-animation">Random Effect</h1>
<script>
$('.random-animation').textillate({
in: {
effect: 'fadeInUp',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: true
}
});
</script>
メソッド
テキストのアニメーションを制御するためのメソッドも用意されています：
//アニメーションの開始
$('.tlt').textillate('start');
//アニメーションの停止
$('.tlt').textillate('stop');
//特定のインデックスから開始
$('.tlt').textillate('start', 2);
//イン/アウトアニメーションの個別制御
$('.tlt').textillate('in');
$('.tlt').textillate('out');
イベント
アニメーションの各段階でイベントをフックできます：
$('.tlt')
.on('start.tlt', function () {
//アニメーション開始時
})
.on('inAnimationBegin.tlt', function () {
//インアニメーション開始時
})
.on('inAnimationEnd.tlt', function () {
//インアニメーション終了時
})
.on('outAnimationBegin.tlt', function () {
//アウトアニメーション開始時
})
.on('outAnimationEnd.tlt', function () {
//アウトアニメーション終了時
})
.on('end.tlt', function () {
//アニメーション終了時
});
まとめ
textillate.jsは、テキストアニメーションを簡単に実装できる強力なライブラリです。基本的な設定から高度なカスタマイズまで柔軟に対応でき、様々な表現が可能です。アニメーション効果を使用する際は、ユーザビリティを考慮しつつ、適切なタイミングと効果を選択することが重要です。
注意点
- jQuery依存のライブラリなので、jQueryが必要です
- 過度なアニメーションはユーザビリティを損なう可能性があります
- モバイル端末での表示パフォーマンスに注意が必要です
- ブラウザの互換性を確認することをお勧めします