テキストを順番に表示！様々なアニメーションで動かせるjQueryのプラグイン「textillate.js」

公開日：2015/05/29

jQuery アニメーションプラグイン

テキストを順番に表示！様々なアニメーションで動かせるjQueryのプラグイン「textillate.js」

ホームページ上のテキストに動きをつけて文字や文章を目立たせたい！
と思ったことはありませんか？

jQueryのプラグイン「textillate.js」を使用するとホームページに表示するテキストに様々なアニメーションをつけることができます。

Textillate.js

キャッチコピーなどに動きを出してアピールしても面白いかと思います。

今回はjQueryのプラグイン「textillate.js」の使用方法を紹介します。

jQueryのプラグイン「textillate.js」の使用方法

使用方法は簡単です。
下記のページから「textillate.js」をダウンロードします。

https://github.com/jschr/textillate

ファイル読込

jQueryとダウンロードしたファイルを読み込みます。

<link href="assets/animate.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/jquery.lettering.js"></script>
<script type="text/javascript" src="jquery.textillate.js"></script>

HTML

アニメーションさせたい要素にクラスをつけます。
下記は「class=”textillate”」を指定しています。

<p class="textillate">テキストが入ります。</p>

1	<p class="textillate">テキストが入ります。</p>

JS

HTMLで記述した要素を指定して「textillate.js」を動かします。
これはデフォルトの設定です。

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

$(function () {

$('.textillate').textillate();

});

</script>

オプションを指定することで、様々なアニメーションで動かすことが可能になります。

サンプル

「textillate.js」を使用したデモページです。
オプションを指定すると様々なアニメーションでテキストを表示することができます。

「textillate.js」を使用したデモページ

オプション

オプションを指定した場合の例です。

<script>
$(function () {
	$('.textillate').textillate({
		// ループ
		loop: true,
		// 間隔時間
		minDisplayTime: 2000,
		// 遅延時間
		initialDelay: 0,
		// 自動スタート
		autoStart: true,
		// アニメーションの開始オプション
		in: {
			// エフェクト
			effect: 'fadeInLeftBig',
			// 遅延時間の指数
			delayScale: 1.5,
			// 文字の遅延時間
			delay: 200,
			// アニメーションを同時実行
			sync: false,
			// アニメーションをランダム実行
			shuffle: false,
			// アニメーションをリバース実行
			reverse: false
		},
		// アニメーションの終了オプション
		out: {
			// エフェクト
			effect: 'bounceOutUp',
			// 遅延時間の指数
			delayScale: 1.5,
			// 文字の遅延時間
			delay: 200,
			// アニメーションを同時実行
			sync: false,
			// アニメーションをランダム実行
			shuffle: false,
			// アニメーションをリバース実行
			reverse: false
		}
	});
});
</script>

$(function () {

$('.textillate').textillate({

// ループ

loop: true,

// 間隔時間

minDisplayTime: 2000,

// 遅延時間

initialDelay: 0,

// 自動スタート

autoStart: true,

// アニメーションの開始オプション

in: {

// エフェクト

effect: 'fadeInLeftBig',

// 遅延時間の指数

delayScale: 1.5,

// 文字の遅延時間

delay: 200,

// アニメーションを同時実行

sync: false,

// アニメーションをランダム実行

shuffle: false,

// アニメーションをリバース実行

reverse: false

// アニメーションの終了オプション

out: {

// エフェクト

effect: 'bounceOutUp',

// 遅延時間の指数

delayScale: 1.5,

// 文字の遅延時間

delay: 200,

// アニメーションを同時実行

sync: false,

// アニメーションをランダム実行

shuffle: false,

// アニメーションをリバース実行

reverse: false

}

});

</script>

また、HTMLに直接エフェクト（オプション）を記述することも可能です。

<p class="textillate" data-in-effect="fadeIn" data-out-effect="fadeOut" data-loop="true">テキストが入ります。</p>

1	<p class="textillate" data-in-effect="fadeIn" data-out-effect="fadeOut" data-loop="true">テキストが入ります。</p>

まとめ

今回は「textillate.js」を使用して、テキストにアニメーションをつけてみました。

文字や文章を順番に表示させたい場合など、簡単に導入できると思います。

ホームページのテキストに動きを出したい！目立たせたい！
などの時に使ってみてはいかがでしょうか？

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください！

お気軽にご相談ください。
022-716-3883
営業時間　平日9:30～18:00

<< 前の記事

画像の下に空白が出来る原因とCSSを使った解決方法

次の記事 >>

Chromeでページのスクリーンショットを撮ることができる拡張機能「FireShot」

仙台のホームページ制作･システム開発･ウェブコンサルティングはアド･エータイプへ。

テキストを順番に表示！様々なアニメーションで動かせるjQueryのプラグイン「textillate.js」

jQueryのプラグイン「textillate.js」の使用方法

ファイル読込

HTML

JS

サンプル

オプション

まとめ

関連記事

Category

最近の投稿

人気の投稿