普通のカウント

0

cssのプロパティも一緒にアニメーション

0

小数点のカウントも余裕

0.01 -> 1.00

カウントダウンもいけるでぇ

20

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.animateNumber.min.js"></script>
<script>
	$(window).load(function(){
		$('#animateNumberBtn01').on('click', function(){
			disabledBtn('#animateNumberBtn01');
			$('#animateNumberDemo01').animateNumber({
				number: 1000000,
				numberStep: function(now, tween) {
					var target = $(tween.elem), rounded_now = Math.round(now);	
					if(now >= tween.end) {
						$('#animateNumberBtn01').prop('disabled', false).text('もう一度!!');
					}	
					target.text(rounded_now);
				},
			}, 10000);
		});
				
		$('#animateNumberBtn02').on('click', function(){
			$this = $(this);
			$('#animateNumberDemo02').css('color', '#888').css('font-size', '14px');
			disabledBtn('#animateNumberBtn02');
			$('#animateNumberDemo02').animateNumber({
				number: 100,
				easing: 'easeout',
				'font-size': '30px',
				'color': 'blue',
				numberStep: function(now, tween) {
					var target = $(tween.elem), rounded_now = Math.round(now);	
					if(now >= tween.end) {
						$('#animateNumberBtn02').prop('disabled', false).text('もう一度!!');
					}
					target.text(rounded_now);
				},
			}, 10000);
		});
				
		$('#animateNumberBtn03').on('click', function(){			
			$this = $(this);
			disabledBtn('#animateNumberBtn03');
			var decimal_places = 2;
			var decimal_factor = decimal_places === 0 ? 1 : decimal_places * 10;
					
			$('#animateNumberDemo03').animateNumber({
				number: 1 * decimal_factor,				
				numberStep: function(now, tween) {
					var floored_number = Math.floor(now) / decimal_factor,
					target = $(tween.elem);
						
					if (decimal_places > 0) {
						// force decimal places even if they are 0
						floored_number = floored_number.toFixed(decimal_places);
								
						// replace '.' separator with ','
						floored_number = floored_number.toString().replace('.', ',');
					}				
					target.text(floored_number);
					if(now >= tween.end) {
						$('#animateNumberBtn03').prop('disabled', false).text('もう一度!!');
					}
				}
			},20000);
		});
			
		$('#animateNumberBtn04').on('click', function(){		
			$this = $(this);
			disabledBtn('#animateNumberBtn04');
			$('#animateNumberDemo04').prop('number', 10).animateNumber({
				number: 0,
				numberStep: function(now, tween) {
					var target = $(tween.elem), rounded_now = Math.round(now);						
					if(now <= tween.end) {
						$('#animateNumberBtn04').prop('disabled', false).text('もう一度!!');
					}
					target.text(rounded_now);
				},
				easing: 'linear'
			},10000);
		});
			
		function disabledBtn(_ele) {
			$(_ele).prop('disabled', true).text('カウント中!!');
		}
	});
</script>
<div id="animateNumberBox">
	<p class="title">普通のカウント</p>
	<div class="animateNumber-box">
		<p><span id="animateNumberDemo01">0</span></p>
		<button class="yellow" id="animateNumberBtn01">開始!!</button>
	</div>
	
	
	<p class="title">cssのプロパティも一緒にアニメーション</p>
	<div class="animateNumber-box">
		<p><span id="animateNumberDemo02">0</span></p>
		<button class="yellow" id="animateNumberBtn02">開始!!</button>
	</div>
	
	<p class="title">小数点のカウントも余裕</p>
	<div class="animateNumber-box">
		<p><span id="animateNumberDemo03">0.01 -> 1.00</span></p>
		<button class="yellow" id="animateNumberBtn03">開始!!</button>
	</div>
	
	<p class="title">カウントダウンもいけるでぇ</p>
	<div class="animateNumber-box">
		<p><span id="animateNumberDemo04">20</span></p>
		<button class="yellow" id="animateNumberBtn04">開始!!</button>
	</div>
</div>

animateNumberについて

animateNumberは、カウントアップっぽい表示で指定した数字を表示してくれるプラグイン
機能自体はシンプルですが、文字サイズ、カラーなどのcssプロパティも一緒にアニメーションさせることができ、イージングまで備えているのでこだわりの表現ができそうです。
numberStepオプションを使えば、コールバック関数的な動作も実現できますので、指定カウントの時にアクションを起こすといったこともできます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • LetterFx

    LetterFx

    複数パターンでテキストアニメーションをセットできる

  • countUp

    countUp

    countUpは、細かいカスタマイズができるカウントアップ

  • SlidingLetters

    SlidingLetters

    SlidingLettersはマウスオーバーでアニメーションでテキスト切り替えできる

  • jQSlickWrap

    jQSlickWrap

    画像のフチに沿って文字を配置してくれる

  • fontSizer

    fontSizer

    ページ内の文字サイズを変更する事ができる