[javascript] ScrollReveal을 이용한 다중 요소 애니메이션 구현 방법

01 Dec 2023

javascript

웹 페이지에서 다중 요소에 애니메이션 효과를 주고 싶다면 ScrollReveal 라이브러리를 사용할 수 있습니다. ScrollReveal은 스크롤 이벤트에 반응하여 요소들을 부드럽게 나타내거나 사라지게 만들어줍니다. 이번 블로그 포스트에서는 ScrollReveal을 이용하여 다중 요소 애니메이션을 구현하는 방법을 알아보겠습니다.

ScrollReveal 설치

먼저 ScrollReveal 라이브러리를 설치해야 합니다. 프로젝트 폴더에서 아래 명령을 실행하여 npm으로 ScrollReveal을 설치합니다.

npm install scrollreveal

ScrollReveal 초기화

ScrollReveal을 사용하기 위해서는 초기화 과정이 필요합니다. HTML 파일에 다음과 같은 스크립트를 추가하여 ScrollReveal을 초기화합니다.

<script src="https://unpkg.com/scrollreveal"></script>
<script>
  ScrollReveal().reveal('.animated-element', { delay: 200 });
</script>

위 스크립트에서 ScrollReveal().reveal() 함수는 애니메이션을 적용할 요소들을 선택하는 역할을 합니다. .animated-element는 애니메이션을 적용하고자 하는 요소의 클래스명입니다. delay 옵션을 설정함으로써 애니메이션 실행 전의 딜레이를 조정할 수 있습니다.

애니메이션 적용할 요소 선택

ScrollReveal을 초기화한 이후에는 애니메이션을 적용할 요소들을 선택해야 합니다. 애니메이션을 적용하려는 요소들에 .animated-element 클래스를 추가해야 합니다.

<div class="animated-element">애니메이션 효과를 주고자 하는 요소 1</div>
<div class="animated-element">애니메이션 효과를 주고자 하는 요소 2</div>
<div class="animated-element">애니메이션 효과를 주고자 하는 요소 3</div>

위 예시에서는 3개의 요소에 애니메이션 효과를 주고자 하므로 모두 .animated-element 클래스를 추가하였습니다.

애니메이션 효과 스타일 설정

애니메이션 효과를 적용하려는 요소들에 CSS 스타일을 설정해야 합니다. ScrollReveal은 요소가 나타날 때 적용할 스타일을 지정하여 애니메이션 효과를 제공합니다.

.animated-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
}

위 예시에서는 요소가 나타날 때 opacity 값을 0에서 1로 변경하고, transform 속성을 이용하여 요소를 위쪽으로 20px만큼 이동시킵니다. transition 속성을 설정하여 요소가 나타나는 애니메이션의 지속시간을 조정할 수 있습니다.

결과 확인

위와 같이 ScrollReveal을 초기화하고 애니메이션을 적용할 요소를 선택하고 스타일을 설정한 후에는 웹 페이지에서 애니메이션 효과를 확인할 수 있습니다. 스크롤이 내려갈 때마다 요소들이 부드럽게 나타나는 것을 확인할 수 있습니다.

결론

ScrollReveal을 사용하여 다중 요소에 애니메이션 효과를 적용하는 방법을 알아보았습니다. ScrollReveal은 간편한 사용법과 다양한 애니메이션 옵션을 제공하여 웹 페이지의 사용자 경험을 향상시킬 수 있습니다. 더 많은 애니메이션 옵션을 활용하여 다양한 효과를 구현해 보세요.

참고 자료

ScrollReveal 라이브러리 공식 문서: https://scrollrevealjs.org/