[javascript] ScrollReveal을 이용한 요소 크기 조정 효과 구현 방법

01 Dec 2023

javascript

여러분은 웹 페이지에 동적인 효과를 추가하고 싶은 일이 있을 수 있습니다. ScrollReveal 라이브러리는 페이지 스크롤 시 요소가 나타나는 애니메이션 효과를 제공하여 마법 같은 경험을 만들어 줍니다.

이번 글에서는 ScrollReveal을 사용하여 요소의 크기를 조정하는 효과를 구현하는 방법을 알아보겠습니다.

ScrollReveal 라이브러리 추가하기

먼저 ScrollReveal 라이브러리를 웹 페이지에 추가해야 합니다. 이를 위해 HTML 파일의 <head> 태그 내에 아래 스크립트 태그를 추가합니다.

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

요소 크기 조정 효과 구현하기

이제 ScrollReveal 라이브러리를 사용하여 요소의 크기 조정 효과를 구현할 차례입니다.

우선, CSS 파일에서 animate__animated 클래스를 포함한 원하는 스타일을 만들어야 합니다. 이 클래스는 ScrollReveal과 함께 작동하여 애니메이션 효과를 적용합니다. 아래는 예시입니다.

.animate__animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

다음은 JavaScript 코드입니다. 아래 코드는 페이지 로딩 시 ScrollReveal을 초기화하고, 해당 요소를 크기 조정 효과와 함께 나타나게 만듭니다.

// ScrollReveal 초기화
ScrollReveal().reveal('.element', {
  duration: 1000,   // 애니메이션 지속 시간 (밀리초)
  scale: 0.5,       // 요소의 크기 조정
  distance: '50px', // 요소가 나타날 때 이동 거리
  origin: 'bottom', // 요소가 나타날 위치
  easing: 'ease-out',  // 애니메이션 이징
});

위 코드에서 '.element'는 효과를 적용할 요소의 선택자입니다. 페이지에 있는 다른 요소의 선택자로 변경하거나, 여러 요소에 동시에 효과를 적용하려면 선택자를 쉼표로 구분하여 작성하면 됩니다.

마무리

이제 ScrollReveal 라이브러리를 이용하여 요소의 크기 조정 효과를 구현하는 방법을 알게 되었습니다. 이를 응용하여 다양한 스크롤 애니메이션 효과를 구현할 수 있으니 창의적으로 활용해 보세요.

더 많은 사용법과 옵션에 대해서는 ScrollReveal 공식 문서를 참고하세요.