クールにロールオーバーするjavascript「flippyMOO」

マウスをロールオーバーするとコンテンツが表示される方法は数多くあります。
しかし、flippyMOOのようにクールなのも少ないでしょう。
mooFlippy

使用方法
flippyMOOから必要ファイル一式をダウンロードします。
<link rel="stylesheet" href="http://yourdomain/flippy.css" type="text/css" media="screen">
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/flippyMOO.v1.1.js" type="text/javascript"></script>

headに上記を記述し、HTMLを以下のように書けば完成です。
<div id="flippies">
<div class="flippy_container">
<div class="flippy">
<div class="title">
<h2>最初に表示されるコンテンツ >img src="http://yourdomain/red_arrow2.gif" width="12" height="17"></h2>
</div>
<div class="body">
<p>ロールオーバー時に表示するコンテンツ</p>
</div>
</div>
</div>
</div>

またflippyMOO.v1.1.jsファイルの37行目あたりのvar _TRANSITION =を変更するとエフェクトの種類や時間を変更できます。
クールにロールオーバーするjavascript「flippyMOO」

sponsors

「クールにロールオーバーするjavascript「flippyMOO」」をシェアする

記事作成:
記事URL:

TOP > > > クールにロールオーバーするjavascript「flippyMOO」