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

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

使用方法

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?

Javascriptサンプルページ一覧

skuare.net