レトロなフリップ時計やカウントダウンタイマーを実装「flipCountDown」

当ページのリンクには広告が含まれています。

jQuery Plugin » アニメーション » レトロなフリップ時計やカウントダウンタイマーを実装「flipCountDown」

レトロなフリップ時計やカウントダウンタイマーを実装するプラグイン「flipCountDown」を紹介します。

jQueryプラグイン「flipCountDown」

このプラグインを使えば、時間の板がパタパタと回転するパタパタ時計（フリップ時計、flip clock）を実装することができます。

また、このパタパタを利用したカウントダウンタイマーを実装することもできます。

オプションでは時計のサイズやカウントダウンまでの日時などを指定することができます。

それではデモページの時計とタイマーをご覧ください。

「flipCountDown」のデモ

デモのソース（HTML + jQuery）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="flipCountDown のデモでーす。">
<title>flipCountDown - jQueryプラグイン</title>
<link href="jquery.flipcountdown.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>flipCountDown デモです。</h1>
 
<h3>時計</h3>
<div id="clock"></div>
 
<h3>カウントダウン（東京五輪まで）</h3>
<div id="timer"></div>
 
 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.flipcountdown.js"></script>
<script>
jQuery(function($){
  $('#clock').flipcountdown();
  $('#timer').flipcountdown({
    size:'md',
    beforeDateTime:'7/24/2020 00:00:01'
  });
});
</script>
 
</body>
</html>

jQueryプラグイン「flipCountDown」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）