[javascript] Velocity.js를 사용하여 요소의 애니메이션을 스크롤 이벤트와 연동하는 방법은?

22 Dec 2023

javascript

Velocity.js는 자바스크립트 라이브러리로, 요소의 애니메이션을 부드럽게 처리할 수 있는 기능을 제공합니다. 이 라이브러리를 사용하여 스크롤 이벤트와 연동된 애니메이션을 구현하는 방법에 대해 살펴보겠습니다.

Velocity.js 설치 및 설정

먼저, Velocity.js를 프로젝트에 설치합니다. npm을 사용하는 경우, 다음 명령어를 실행하여 설치합니다:

npm install velocity-animate

설치가 완료되면, 스크립트를 HTML 파일에 추가하여 라이브러리를 로드합니다:

<script src="node_modules/velocity-animate/velocity.min.js"></script>

스크롤 이벤트와 연동된 애니메이션 구현

다음은 Velocity.js를 사용하여 스크롤 이벤트와 연동된 애니메이션을 구현하는 예제 코드입니다. 스크롤 이벤트가 발생할 때, 요소의 위치에 따라 애니메이션을 적용합니다.

window.addEventListener('scroll', function() {
  var element = document.getElementById('animatedElement');
  var elementPosition = element.getBoundingClientRect().top;

  if (elementPosition < window.innerHeight) {
    Velocity(element, { opacity: 1, translateY: 0 }, { duration: 1000, easing: 'ease' });
  } else {
    Velocity(element, { opacity: 0, translateY: 50 }, { duration: 1000, easing: 'ease' });
  }
});

위 코드는 스크롤 이벤트를 감지하여 animatedElement라는 요소의 위치에 따라 투명도와 이동 애니메이션을 적용합니다. 요소가 화면에 나타나면 opacity와 translateY 속성을 변경하여 나타남 효과를 주고, 화면을 벗어나면 다시 숨겨지는 효과를 줍니다.

이와 같이 Velocity.js를 사용하여 스크롤 이벤트와 연동된 애니메이션을 구현할 수 있습니다. 더 많은 상세한 사용법은 공식 문서를 참고하시기 바랍니다.

Velocity.js 설치 및 설정

스크롤 이벤트와 연동된 애니메이션 구현

참고 자료