テキストにアニメーションを追加するjQueryプラグイン［textillate.js］の使い方を紹介します。
まずはサンプルをご覧ください。
textillate.js : http://textillate.js.org
エフェクト部分は［animate.css］に依存しているため、アニメーションの種類が豊富に指定できる点が最大の特長です。
またjQueryに依存しており、他にも［jquery.lettering.js］という外部ファイルが必要になります。
ファイル一式をダウンロード
必要なファイルは以下。
- jQuery.js
- jquery.textillate.js
- jquery.lettering.js
- animate.css
入手するには下記公式ページから。右上の「Download ZIP」からファイル一式をダウンロードできます。
GitHib : https://github.com/jschr/textillate
ダウンロードしたZIPファイルを解凍すると、「assets」というフォルダの中に必要なデータがすべて揃っていますので、それを使いましょう。
［textillate.js］の実装
今回はダウンロードしたファイルはHTMLの<head>〜</head>内ですべて読み込むことにします。
<link rel="stylesheet" href="animate.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="jquery.textillate.js"<</script> <script src="jquery.lettering.js"<</script>
HTMLの記述
アニメーションを施すテキスト部分を作ります。
<span class="test">SAMPLE TEXT</span>
ここでは「test」というclass名にしてみました。
初期設定
最後に［textillate.js］を動かすための初期設定を記述します。これを忘れると動かないですからね。
<script>
$(function () {
$('.test').textillate();
})
</script>
先ほどテキスト部分に「class=”test”」を付与したので、ここでは「.test」と指定します。
ここまでで導入完了ですが、オプション設定でアニメーションの種類やループ機能等のカスタマイズが可能です。
オプション設定
追加オプションの指定は2通りの方法があります。
JavaScriptで指定する
<script>
$('.test').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>
カスタムデータ属性で指定する
独自データ属性を使ってオプションを指定する際は次のように記述します。
<span class="test" data-in-effect="rollIn" data-out-shuffle="true">SAMPLE TEXT</span>
どちらかお好みの方法を選択できるのが嬉しいですね。
実際に使ってみた動作サンプルが以下になります。
唯一のデメリットは、外部スタイルシート（animate.css）も含め、必要なファイルが4つになること。
最近はファイル1つで賄うライブラリが流行ですから、少々面倒な部分もあるかもしれません。
逆にメリットは豊富なアニメーションやオプションが用意されていることですね。
テキストを装飾したいときには非常に有効かと思います。
ぜひお試しください。
