skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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ライブラリ「mootools」でテキストにエフェクトをかけるサンプル

記事作成：2009年03月05日

前の記事：ALTでキャプションをふわりと表示：jQueryプラグイン「jCaption」
次の記事：画像を左右にスクロールさせられるJavaScript「jQuery Smooth Div Scroll」