テキストアニメーションできるライブラリ「textillate.js」の使い方・カスタマイズ

はじめに

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が必要です
• 過度なアニメーションはユーザビリティを損なう可能性があります
• モバイル端末での表示パフォーマンスに注意が必要です
• ブラウザの互換性を確認することをお勧めします

参考リンク

• textillate.js GitHub
• Animate.css
• jQuery