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

クールな動きで時間を表示するJavaScript「Learn how to Create a Retro Animated Flip-Down Clock」

｜ ｜ ｜ ｜ ｜ ｜ ｜

JavaScriptライブラリのmootoolsを使用して、時間をめくるような感じで表示します。
この動きはティザーサイトのカウントダウンに使えそうですね。
via：Learn how to Create a Retro Animated Flip-Down Clock - Nettuts+

使用方法
Learn how to Create a Retro Animated Flip-Down Clock - Nettuts+からファイルをダウンロードします。
基本的にはそれをそのままアップすれば完成です。
一応以下に・・・
<link rel="stylesheet" type="text/css" href="style.css" />
<div id="wrapper">
<div id="back">
<div id="upperHalfBack">
<img src="spacer.png" /><img id="hoursUpBack" src="Single/Up/AM/0.png"/>
<img id="minutesUpLeftBack" src="Double/Up/Left/0.png" class="asd" /><img id="minutesUpRightBack" src="Double/Up/Right/0.png"/>
<img id="secondsUpLeftBack" src="Double/Up/Left/0.png" /><img id="secondsUpRightBack" src="Double/Up/Right/0.png"/>
</div>
<div id="lowerHalfBack">
<img src="spacer.png" /><img id="hoursDownBack" src="Single/Down/AM/0.png" />
<img id="minutesDownLeftBack" src="Double/Down/Left/0.png" /><img id="minutesDownRightBack" src="Double/Down/Right/0.png" />
<img id="secondsDownLeftBack" src="Double/Down/Left/0.png" /><img id="secondsDownRightBack" src="Double/Down/Right/0.png" />
</div>
</div>
<div id="front">
<div id="upperHalf">
<img src="spacer.png" /><img id="hoursUp" src="Single/Up/AM/0.png"/>
<img id="minutesUpLeft" src="Double/Up/Left/0.png" /><img id="minutesUpRight" src="Double/Up/Right/0.png"/>
<img id="secondsUpLeft" src="Double/Up/Left/0.png" /><img id="secondsUpRight" src="Double/Up/Right/0.png"/>
</div>
<div id="lowerHalf">
<img src="spacer.png" /><img id="hoursDown" src="Single/Down/AM/0.png"/>
<img id="minutesDownLeft" src="Double/Down/Left/0.png" /><img id="minutesDownRight" src="Double/Down/Right/0.png" />
<img id="secondsDownLeft" src="Double/Down/Left/0.png" /><img id="secondsDownRight" src="Double/Down/Right/0.png" />
</div>
</div>
</div>
<script src="mootools.js" type="text/javascript"></script>
<script src="animate.js" type="text/javascript"></script>

クールな動きで時間を表示するJavaScript「Learn how to Create a Retro Animated Flip-Down Clock」サンプル

記事作成：2009年10月22日

前の記事：[メモ]モバイルエミュレーター
次の記事：画像とテキストの組合せで見せ方を変えるJavaScript「Switch Display Optionswith CSS & jQuery」