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

Mootools Function Chainingにて面白い表現が紹介されていました。
JavaScriptライブラリ「mootools」を使用し、テキストにエフェクトをかける方法です。
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ライブラリ「mootools」でテキストにエフェクトをかけるサンプル

sponsors

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

記事作成:
記事URL:

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