[javascript] Velocity.js를 사용하여 요소의 애니메이션 효과를 카운터 애니메이션으로 적용하는 방법은?

22 Dec 2023

javascript

Velocity.js는 JavaScript로 요소의 애니메이션을 처리하기 위한 강력하고 유연한 라이브러리입니다. 요소에 카운터 애니메이션 효과를 적용하는 방법을 살펴보겠습니다.

1. Velocity.js 설치

먼저 Velocity.js를 프로젝트에 설치합니다. npm을 사용하여 설치하려면 다음 명령을 실행합니다.

npm install velocity-animate

2. HTML 구조 작성

카운터 애니메이션을 적용할 요소에 대한 HTML 구조를 작성합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Velocity.js 카운터 애니메이션</title>
</head>
<body>
  <div id="counter">0</div>
</body>
</html>

3. Velocity.js를 사용한 카운터 애니메이션 구현

다음으로, Velocity.js를 사용하여 카운터 애니메이션을 구현합니다.

const counter = document.getElementById('counter');

// 시작 값
let startValue = 0;

// 목표 값
let targetValue = 100;

// 애니메이션 적용
Velocity(counter, { text: startValue }, { duration: 1000, easing: 'easeOutCubic', progress: (elements, complete, remaining, start, tweenValue) => {
  counter.textContent = Math.ceil(tweenValue);
}});

위 코드에서는 counter 요소의 텍스트 값을 0에서 100까지 부드러운 애니메이션으로 변경합니다. 이때 easeOutCubic 이징 함수를 사용하여 자연스러운 애니메이션 효과를 적용하였습니다.

이제 해당 코드를 적용하여 HTML 파일을 실행하면 카운터 애니메이션이 적용된 것을 확인할 수 있습니다.

이것으로 Velocity.js를 사용하여 요소에 카운터 애니메이션을 적용하는 방법을 알아보았습니다. 추가 질문이 있으시면 언제든지 물어보세요!