今日の人気記事

  1. 国際電話の入力フォーム「International Telephone Input」

指定した数値までカウントアップ「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

スポンサーリンク

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