今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. 指定した数値から折れ線グラフを描画「SimpleChart」
  3. 編集可能なリストを作成「Editable Listview」
  4. シンプルなレスポンシブ・トップメニュー「PrMenu」
  5. select要素を検索できるように「Chosen」

アニメ効果付きのレスポンシブ・カウンター「MB Comingsoon」

スポンサーリンク

アニメ効果付きのレスポンシブ・カウンターを実装するプラグイン「MB Comingsoon」を紹介します。

jQueryプラグイン「MB Comingsoon」

このプラグインを使えば、指定した年月日へアニメーションでカウントダウンするカウンターを実装することができます。

しかもレスポンシブ対応! オプションでアニメーションのスピードを指定することもできます。

スポンサーリンク

それではデモページのカウントダウン・カウンターをご覧ください。

「MB Comingsoon」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="MB Comingsoon のデモでーす。">
<title>MB Comingsoon - jQueryプラグイン</title>
<link href="mb-comingsoon-iceberg.css" rel="stylesheet" />
</head>
<body>
<h1>MB Comingsoon デモでーす。</h1>
<p>ブラウザーの幅を縮めてみてください。</p>
<div id="demo"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.mb-comingsoon.min.js"></script>
<script>
$(function(){
  $('#demo').mbComingsoon({
    expiryDate: new Date(2020, 0, 1, 9, 30),
    speed:100
  });
});
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)