[javascript] ScrollReveal을 이용한 요소 회전 애니메이션 효과 구현 방법

01 Dec 2023

웹 페이지에 동적인 애니메이션 효과를 적용하고 싶다면 ScrollReveal 라이브러리를 사용할 수 있습니다. ScrollReveal은 스크롤 이벤트와 연동하여 요소가 화면에 나타날 때 특정한 애니메이션 효과를 줄 수 있게 해주는 라이브러리입니다.

이번 포스트에서는 ScrollReveal을 이용하여 요소를 회전하는 애니메이션 효과를 구현하는 방법에 대해 알아보겠습니다.

단계 1: ScrollReveal 라이브러리 설치하기

먼저 ScrollReveal 라이브러리를 설치해야 합니다. npm을 이용하는 경우, 아래 명령어를 사용하여 설치할 수 있습니다.

npm install scrollreveal

혹은 CDN 링크를 이용해서 스크립트를 가져와도 됩니다.

<script src="https://unpkg.com/scrollreveal"></script>

ScrollReveal을 사용하기 위해서는 먼저 초기화해야 합니다. 이를 위해서는 ScrollReveal 객체를 생성하고 초기화 설정을 정의해야 합니다. 아래의 예시 코드는 초기화 설정을 정의하는 예시입니다.

const sr = ScrollReveal();
sr.reveal('.element', {
  duration: 1000,
  rotate: {
    x: 0,
    y: 0,
    z: 180
  }
});

위의 코드에서 duration은 애니메이션의 속도를 정의하는데, 여기서는 1초로 설정되어 있습니다. rotate는 회전 애니메이션 효과를 정의하는데, 이 예시에서는 x, y, z 축을 기준으로 180도 회전합니다.

이제 회전 애니메이션 효과를 적용하고 싶은 요소에 클래스를 추가하고 애니메이션 효과를 적용할 수 있습니다. 아래 예시 코드는 요소에 element 클래스를 추가하고 ScrollReveal을 이용하여 애니메이션 효과를 적용한 예시입니다.

<div class="element">
  내용이 들어갈 요소
</div>

마지막으로 ScrollReveal을 실행하여 스크롤 이벤트와 연동하여 애니메이션 효과를 활성화해야 합니다. 아래의 예시 코드는 초기화한 ScrollReveal 객체를 이용하여 애니메이션 효과를 활성화하는 예시입니다.

sr.reveal('.element');

위의 코드는 모든 .element 클래스를 가진 요소에 애니메이션 효과를 적용합니다.

위의 단계를 따라가면 ScrollReveal을 이용하여 요소를 회전하는 애니메이션 효과를 구현할 수 있습니다. ScrollReveal의 다양한 옵션을 이용하면 보다 다채로운 애니메이션 효과를 구현할 수 있으니, 자세한 내용은 공식 문서를 참고하시기 바랍니다.

이상으로 ScrollReveal을 이용한 요소 회전 애니메이션 효과를 구현하는 방법에 대해 알아보았습니다. 아마도 웹 페이지에 동적인 효과를 추가하고 싶을 때 유용하게 사용될 수 있을 것입니다.