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

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

sponsors

使用方法

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 =を変更するとエフェクトの種類や時間を変更できます。

サンプル

We're all
hopelessly
addicted to coffee >

We're all hopelessly addicted to coffee. Twitch drinks 12 cups a day hence the name while Dopy only drinks water. Guess who's having more fun?

sponsors

Javascriptサンプルページ一覧
skuare.net