【フェーダー】プラグインを利用してテキストをエフェクト表示【textillate.js】

jQueryプラグインのtextillate.jsを利用します。テキストに様々なエフェクトを付けて表示ができます。textillate.js、lettering.js、animate.cssを読み込んで実装します。

htmlのコードは下記になります。
テキストのpタグに、それぞれエフェクトごとにクラス名を付与します。

<p class="fade_txt effect1">A simple plugin for CSS3 text animations.</p>
<p class="fade_txt effect2">A simple plugin for CSS3 text animations.</p>
<p class="fade_txt effect3">A simple plugin for CSS3 text animations.</p>

続いてCSSのコードです。

.fade_txt {
	font-size: 30px;
	font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','ＭＳ Ｐ明朝','MS PMincho',serif;
	font-weight: bold;
}

最後にjQueryのコードです。
effectはanimate.cssを参照して指定します。上から順番に、fadeIn、flipInX、flashの動作になります。

$(function() {
	$('.effect1').textillate({
	loop: true,	// ループ繰り返し
		in: {
		effect: 'fadeIn',	// エフェクトの指定
		delayScale: 1.5,	// 遅延時間の指数
		delay: 30,	// 文字ごとの遅延時間
		sync: false	// アニメーションを全ての文字に同時適用
		}
	});
	$('.effect2').textillate({
	loop: true,	// ループ繰り返し
		in: {
		effect: 'flipInX',	// エフェクトの指定
		delayScale: 1.5,	// 遅延時間の指数
		delay: 30,	// 文字ごとの遅延時間
		sync: false	// アニメーションを全ての文字に同時適用
		}
	});
	$('.effect3').textillate({
	loop: true,	// ループ繰り返し
		in: {
		effect: 'flash',	// エフェクトの指定
		delayScale: 1.5,	// 遅延時間の指数
		delay: 30,	// 文字ごとの遅延時間
		sync: false	// アニメーションを全ての文字に同時適用
		}
	});
});