ミギムキ

[jQuery] 数値をパラパラとカウントアップ/ダウンさせたい

やりたいこと

サンプルコード

html

<p class="count_num" data-start="0" data-end="100">カウントアップ</p> <p class="count_num" data-start="100" data-end="0">カウントダウン</p>
スポンサー広告

jQuery

jQuery(function($) { $(window).scroll(function() { var disp_pos = $(this).scrollTop() + ( $(window).innerHeight() / 2 ); $('.count_num').each(function() { var obj_offset_top = $(this).offset().top; if( obj_offset_top < disp_pos ) { var target = $(this); var startNum = target.attr('data-start'); var endNum = target.attr('data-end'); if( startNum != endNum ) { var countNum = startNum; var timerFunc = setInterval(function() { if( startNum < endNum ) { countNum++; } else { countNum--; } target.text(countNum); if( countNum == endNum ) { clearInterval(timerFunc); target.attr('data-start', endNum); } }, 10 ); } } }); }); });

仕組み、解説、補足など

スポンサー広告