textillate.js

テキストにアニメーションを追加する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>

どちらかお好みの方法を選択できるのが嬉しいですね。

実際に使ってみた動作サンプルが以下になります。

DEMO : https://on-ze.com/demo/jquery-textillate.js/

唯一のデメリットは、外部スタイルシート（animate.css）も含め、必要なファイルが4つになること。
最近はファイル1つで賄うライブラリが流行ですから、少々面倒な部分もあるかもしれません。

逆にメリットは豊富なアニメーションやオプションが用意されていることですね。

テキストを装飾したいときには非常に有効かと思います。
ぜひお試しください。