クールな動きで時間を表示する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+

sponsors

使用方法

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サンプルページ一覧
skuare.net