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

## はじめに

textillate.jsは、テキストに簡単にアニメーション効果を追加できるjQueryプラグインです。文字単位でのフェードインやスライドインなど、様々なアニメーション効果を実現できます。この記事では、textillate.jsの基本的な使い方からカスタマイズ方法まで詳しく解説します。

## 導入方法

textillate.jsを使用するには、以下のライブラリを読み込む必要があります：

```html
<!-- 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の記述

```html
<h1 class="tlt">Hello World!</h1>
```

### JavaScriptでの初期化

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

## アニメーションのカスタマイズ

### 1. デフォルト設定の変更

プラグイン全体のデフォルト設定を変更する場合：

```javascript
$.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要素に直接データ属性で設定する場合：

```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初期化時の設定

```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. シンプルなフェードイン

```html
<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. ループするアニメーション

```html
<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. ランダムな文字アニメーション

```html
<h1 class="random-animation">Random Effect</h1>

<script>
$('.random-animation').textillate({
    in: {
        effect: 'fadeInUp',
        delayScale: 1.5,
        delay: 50,
        sync: false,
        shuffle: true
    }
});
</script>
```

## メソッド

テキストのアニメーションを制御するためのメソッドも用意されています：

```javascript
//アニメーションの開始
$('.tlt').textillate('start');

//アニメーションの停止
$('.tlt').textillate('stop');

//特定のインデックスから開始
$('.tlt').textillate('start', 2);

//イン/アウトアニメーションの個別制御
$('.tlt').textillate('in');
$('.tlt').textillate('out');
```

## イベント

アニメーションの各段階でイベントをフックできます：

```javascript
$('.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は、テキストアニメーションを簡単に実装できる強力なライブラリです。基本的な設定から高度なカスタマイズまで柔軟に対応でき、様々な表現が可能です。アニメーション効果を使用する際は、ユーザビリティを考慮しつつ、適切なタイミングと効果を選択することが重要です。

実際に使うものはそんなにないので、ある程度カスタマイズするのがいいかなと思います。
ランダムな文字アニメーションができるのが、他にはない機能なので良いです。

【CSS, JS】textillin（テキストアニメーション）
https://codepen.io/sarap422/pen/zYWBGRy


## 注意点

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

## 参考リンク

- [textillate.js GitHub](https://github.com/jschr/textillate)
- [Animate.css](https://animate.style/)
- [jQuery](https://jquery.com/)