[JS] 숫자 카운트 애니메이션 만들기

홈페이지에서 수치를 표현할 때 효과적으로 시선을 이끌 수 있는 방법 중 하나가 바로 카운트 애니메이션 효과를 사용하는 것입니다.

 

코드

 

예를 들어 17242까지 증가한다고 할 때, 일정한 간격으로 증가하는 것이 아닌 점점 증가하는 수치가 줄어들면서 훨씬 자연스러운 숫자 카운트 애니메이션으로 보이게 제작해 보았습니다.

 

반응형

코드 풀이

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

// 카운트를 표시할 요소
const $counter = document.querySelector(".count");

// 목표수치
const max = 17242;

counter($counter, max);

counter 함수를 하나 제작하고, 해당 함수로 카운트 될 요소와 카운트 애니메이션의 마지막 값을 넘겨줍니다.

 

function counter($counter, max) {
  let now = max;

  const handle = setInterval(() => {
    $counter.innerHTML = Math.ceil(max - now);
  
    // 목표에 도달하면 정지
    if (now < 1) {
      clearInterval(handle);
    }
  
    // 적용될 수치, 점점 줄어듬
    const step = now / 10;

    now -= step;
  }, 50);
}

목표수치를 정해두고, 0부터 해당 값까지 일정한 수치를 계속하여 더해주고 반영해줍니다.

 

setInterval 메서드를 이용하여 0.05초마다 더하는 작업을 반복해주고 목표에 도달하면 clearInterval 메서드로 정지시켜줍니다.

 

const step = now / 10;

now -= step;

일반적인 카운트 업을 구현할 때는 step 변수 값이 변하지 않고 일정한 수치가 증가합니다. 하지만 해당 step 변수의 값이 계속하여 작아진다면, 증가되는 수가 작아지면서 훨씬 자연스러운 증가 효과를 만들 수 있습니다.

 

카운팅 되는 시간과 수치를 조정하기 위해서는 나누는 값을 더 키워서 카운트 시간을 조절할 수 있습니다.