숫자 카운팅

<div id="counter">
    <div class="counter-label">SINCE</div>
    <div class="counter-value" data-count="2012">0</div>
</div>

<style>
/* 🔹 카운터 컨테이너 */
#counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

/* 🔹 'SINCE' 텍스트 (위쪽) */
.counter-label {
    font-family: "Pretendard", sans-serif;
    font-size: 22px; /* 적당한 크기 */
    font-weight: 700;
    color: white; /* 흰색 */
    text-transform: uppercase;
    line-height: 1; /* 행간 최소화 */
    margin-bottom: -5px; /* 숫자와 간격 최소화 */
}

/* 🔹 카운트 숫자 (아래쪽) */
.counter-value {
    font-family: "Pretendard", sans-serif;
    font-size: 80px; /* 더 크게 */
    font-weight: 900; /* 두껍게 */
    text-align: center;
    color: white; /* 흰색 */
    padding: 0;
    line-height: 1; /* 행간 최소화 */
}
</style>

<script>
function count(element) {
    var target = +element.getAttribute('data-count');
    var countSpeed = 2000; // 애니메이션 지속 시간 (2초)
    var interval = 50; // 업데이트 간격 (50ms)
    var countStep = target / (countSpeed / interval);

    var currentCount = 0;
    var counter = setInterval(function() {
        currentCount += countStep;
        if (currentCount >= target) {
            clearInterval(counter);
            currentCount = target;
        }
        element.textContent = Math.floor(currentCount);
    }, interval);
}

document.addEventListener('DOMContentLoaded', function() {
    var counters = document.querySelectorAll('.counter-value');
    counters.forEach(function(counter) {
        count(counter);
    });
});
</script>