CSS3 Countdown - ティザーサイトで使いたい。CSS3/JavaScript製のタイマー
新しいプロジェクトをはじめる時などに活躍するのがカウントダウンタイマーです。後何日、後何時間といった具合に刻々と減っていくタイマーを目にするとわくわくさせられるのではないでしょうか。 カウントダウンの方法は幾つかあると思いますが、今回はCSS3 Countdownを紹介します。CSS3とJavaScriptを組み合わせて格好いいタイマーを表示します。
CSS3 Countdownの使い方
秒単位でタイマーが徐々に減っていきます。年数ではなく日数になっていて、例えばこのデモでは2080日を越えて設定されています（2020年指定です）。オリンピックに合わせたりするのは面白そうです。
使い方はこんな感じです。
<div id="CDT"></div>
<script>
// Set countdown limit
var tl = new Date('2020/01/01 00:00:00');
// You can add time's up message here
var timer = new CountdownTimer('CDT',tl,'<span class="number-wrapper"><div class="line"></div><span class="number end">Time is up!</span></span>');
timer.countDown();
</script>
プロジェクトのティザーサイトに使ったり、イベント公開に合わせて設定したりすると格好良さそうです。文字列でカウントダウンよりもインパクトがありそうですね。
CSS3 CountdownはJavaScript/CSS3製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。