文字にアニメーションを加えることができるjQueryプラグイン「textillate.js」

textillate.jsは、サイト内の文字を表示する際にアニメーションを加えることができるjQueryプラグインです。

挙動については、こちらで確認できます。

textillate.jsの使い方

ステップ1. 各種スクリプトとCSSのダウンロードと設置

GitHubから各種スクリプトとCSSファイルをダウンロードします。

ダウンロードしたファイルの中から、以下のファイルをサーバーにアップロードしてください。

jquery.textillate.js
assets/animate.css
assets/jquery.fittext.js
assets/jquery.lettering.js

ステップ2. jQuery本体および各種スクリプト・CSSの読み込み

続いて、jQuery本体と各種スクリプト、CSSファイルを読み込みます。


<link rel="stylesheet" href="assets/animate.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.textillate.js"<</script>
<script src="assets/jquery.fittext.js"<</script>
<script src="assets/jquery.lettering.js"<</script>

スクリプトは、</body>の直前で読み込んで大丈夫です。

ステップ3. HTMLのマークアップ

HTMLで文字をマークアップします。今回は.sampleというクラスを追加しました。

<p class="sample">Test Text</p>

HTMLは非常にシンプルですね。

ステップ4. textillate.jsの実行

最後にtextillate.jsを実行します。


<script>
$(function () {
  $('.sample').textillate();
})
</script>

.sampleのところは、環境に合わせてクラス名を変更してください。

textillate.jsのオプション指定

textillate.jsには、各種オプションが用意されています。以下のようにアニメーションの繰り返しや遅延などを細かく指定できます。


<script>
$('.sample').textillate({
  selector: '.texts', //要素の指定
  loop: false, //アニメーションの繰り返し
  minDisplayTime: 3000, //アニメーションの間隔
  initialDelay: 1000, //アニメーション開始までの遅延
  autoStart: true, //アニメーションの自動スタート
  inEffects: [], //エフェクト開始時のアニメーション
  outEffects: [ 'hinge' ], //エフェクト終了時のアニメーション

  //アニメーション開始時の設定
  in: {
    effect: 'fadeInLeftBig', //エフェクトの指定
    delayScale: 1.5, //各文字に適用される遅延係数
    delay: 50, //文字ごとの遅延時間
    sync: false, //アニメーションをすべての文字に同時に適用
    shuffle: false, //ランダム表示
    reverse: false, //エフェクトの逆再生(sync:trueとの併用は不可)
    callback: function () {} //コールバック関数
  },

  //アニメーション終了時の設定
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  }
  callback: function () {},
  type: 'char'
});
</script>

詳しくは、GitHubのReadmeをご参照ください。

あとがき

キャッチコピーなど、注目してほしい文字にアニメーションを加えると効果的ですね。

文字にアニメーションを加えたい時は、ぜひ参考にしてください。