[Vanilla JS] 숫자 상승 애니메이션 / 카운트 애니메이션

💡 목표

0부터 원하는 숫자까지 숫자가 상승하는 애니메이션 구현

 

📌 HTML

<h2 id="count"></h2>

 

📌 CSS

#count { font-size: 30px; }

 

📌 JavaScript

let countBox = document.querySelector('#count');
let count = 0;
let num = 1234567890;

let counting = setInterval(function () {
    if (count >= num) {
        count = num;
        clearInterval(counting);
    } else {
        count += 12345678;
    }
    countBox.innerHTML = new Intl.NumberFormat().format(count);
}, 10);

 

💛 결과물

 

 

 

Html 아이콘 제작자: Freepik - Flaticon
Css 아이콘 제작자: Freepik - Flaticon
자바 스크립트 아이콘 제작자: Rmpp - Flaticon

11,072종의 무료 html 아이콘