はじめに

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

参考リンク