JavaScriptライブラリ「mootools」でテキストにエフェクトをかける

Mootools Function Chainingにて面白い表現が紹介されていました。
JavaScriptライブラリ「mootools」を使用し、テキストにエフェクトをかける方法です。

使用方法

mootoolsからmootools.jsをダウロードします。

<script src="mootools-1.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
	window.addEvent('domready', function(){
		var fnChain = new Chain();
		var move = $$('id名'); //エフェクトをかけたい対象のid名
		move.each(function(moving) {
			move.setStyle('opacity', 0); //初期透明度
			move.set('morph', { //エフェクト設定
				duration: 800,
				transition: Fx.Transitions.Bounce.easeOut,
				onComplete: function(){fnChain.callChain()}
			});
		});
		fnChain.chain(
			function(){$('id名2').morph({opacity: 1, left: 20});} //最終表示
		);
		(function(){fnChain.callChain();}).delay(1000); //初期表示
	});
</script>
さらにエフェクトをつけたいidなどを記述します。

<div id="id名">
 <p id="id名2"></p>
</div>

サンプル

全部にかかっています・・・
Javascriptサンプルページ一覧
skuare.net