• Q&A
  • 회원가입
  • 로그인

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

187  

숫자 카운팅 애니 효과

 

<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



2021-10-25 (월) 14:35 1개월전
最初は、大学の最初のコースだったので、コーディングの全体像を理解していましたが、長い目で見ると、少し複雑になってきて、すべてが混乱してきたような気がします(笑) それで、2年目に進路を変更しました(笑)
주소
찾아주셔서 감사합니다. Since 2012