[js] JS - 숫자 (카운팅/변동) 애니 효과

숫자 카운팅 애니 효과

 

<style>

.percent {

  font-size: 72px;

  position: absolute;

  left: 45%;

}

</style>

<div class="percent">0</div>

<script>

// Use requestAnimationFrame with setTimeout fallback

window.requestAnimFrame = (function () {

  return  window.requestAnimationFrame ||

    window.webkitRequestAnimationFrame ||

    window.mozRequestAnimationFrame ||

    window.oRequestAnimationFrame ||

    window.msRequestAnimationFrame ||

    function (callback) {

      window.setTimeout(callback, 1000 / 60);

    };

})();

var percentEl = document.querySelector('.percent');

var max = 100;

(function animloop() {

  if (percentEl.innerHTML >= max) { return; } //Stop recursive when max reach

  requestAnimFrame(animloop); 

  percentEl.innerHTML++;

})();

</script>

결과보기

https://codepen.io/phliem/pen/EKVNva