숫자 카운팅 애니메이션
HTML구조 (예제)
<span>
TODAY : <span id="today-count" data-count="<?php echo $visit[1] ?>">0</span> /
TOTAL : <h4><span id="total-count" data-count="<?php echo $visit[4] ?>">0</span></h4>
</span>
적용하고싶은곳에
data-count를 추가하여 넣으면 동작합니다.
0은 처음 실행시 기본값숫자입니다.
스크립트
<script>
function animateCounter(id, target) {
const el = document.getElementById(id);
let count = 0;
const speed = Math.ceil(target / 100); // 시간 조절
const interval = setInterval(() => {
count += speed;
if (count >= target) {
count = target;
clearInterval(interval);
}
el.textContent = count;
}, 20); // 속도 조절 가능
}
window.onload = () => {
const todayTarget = parseInt(document.getElementById('today-count').dataset.count);
const totalTarget = parseInt(document.getElementById('total-count').dataset.count);
animateCounter('today-count', todayTarget);
animateCounter('total-count', totalTarget);
};
</script>
예제는 제 홈페이지 링크 참조바랍니다~