今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. なめらかなアニメ効果付きのグライドナビゲーション「Dynamic glide navigation」
  3. ExcelのようにTableが編集できちゃう「Handsontable」
  4. マウスオーバーで画像を拡大「ZoomPic」
  5. 画像スライドショー「jCarousel」オプションたくさんアルヨ

指定した数値までカウントアップ「animateNumber」

スポンサーリンク

指定した数値までカウントアップをしてくれるプラグイン「animateNumber」を紹介します。

jQueryプラグイン「animateNumber」

このプラグインを使えば、簡単に指定した数値までのカウントアップをWeb上で実現することができます。

例えば、100までのカウントアップを実装した場合、指定した要素が0、1、2、3、... 99、100とカウントアップします。また、カウントアップ完了までの時間も指定できるので、使い方次第ではサイトにおもしろい効果を加えられそうですね。

スポンサーリンク

デモで、100までのカウントアップをご覧ください。

「animateNumber」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>animateNumber - jQueryプラグインまとめのカルマ</title>
</head>
<body>

<h1>animateNumberのデモでーす。</h1>
<h2><span id="lines">0</span> %</h2>

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="jquery.animateNumber.js"></script>
<script>
$('#lines').animateNumber({
  number: 100
}, 2000);
</script>

</body>
</html>

jsファイルのダウンロードやその他オプションはこちらからどうぞ。
» animateNumber

スポンサーリンク

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