ScrollReveal은 웹 페이지의 스크롤 이벤트에 따라 요소들을 애니메이션으로 적용하는 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지의 요소들을 매력적으로 표현할 수 있습니다. 이번 글에서는 ScrollReveal을 사용하여 커스텀 애니메이션을 작성하는 방법을 알아보겠습니다.

ScrollReveal 설치하기

먼저 ScrollReveal을 설치해야 합니다. 아래 명령어를 사용하여 npm을 통해 ScrollReveal을 설치할 수 있습니다.

npm install scrollreveal

ScrollReveal 초기화하기

ScrollReveal을 사용하기 위해 먼저 초기화해야 합니다. 초기화는 스크립트 로드 후에 이루어져야 합니다. 아래 코드를 사용하여 ScrollReveal 객체를 초기화할 수 있습니다.

import ScrollReveal from 'scrollreveal';

ScrollReveal().reveal('.element');

여기서 .element는 애니메이션을 적용할 요소의 클래스나 ID를 나타냅니다. 클래스나 ID 외에도 다양한 선택자를 사용할 수 있습니다.

애니메이션 옵션 설정하기

ScrollReveal을 사용하여 추가적인 애니메이션 옵션을 설정할 수 있습니다. 아래 코드는 몇 가지 예제 옵션을 보여줍니다.

• delay: 애니메이션 시작 전의 시간 지연
• duration: 애니메이션의 지속시간
• origin: 애니메이션의 시작 위치
• distance: 애니메이션에서 이동할 거리
• rotate: 요소의 회전
• scale: 요소의 크기 변화

ScrollReveal().reveal('.element', {
  delay: 200,
  duration: 1000,
  origin: 'top',
  distance: '20px',
  rotate: { x: 0, y: 0, z: 0 },
  scale: 1,
});

위 예제에서는 애니메이션 적용된 요소들이 위에서 아래로 20px 만큼 이동하면서 나타납니다.

커스텀 애니메이션 작성하기

ScrollReveal을 사용하면 커스텀 애니메이션을 작성할 수도 있습니다. 아래 코드는 fade-in 애니메이션을 작성하는 예제입니다.

ScrollReveal().reveal('.element', {
  beforeReveal: (domEl) => {
    domEl.style.opacity = 0;
  },
  afterReveal: (domEl) => {
    domEl.style.opacity = 1;
  },
});

위 예제에서는 애니메이션 적용된 요소들이 페이드 인 효과로 나타납니다. beforeReveal 콜백 함수에서는 요소의 투명도를 0으로 설정하고, afterReveal 콜백 함수에서는 1로 설정합니다.

마무리

이번 글에서는 ScrollReveal을 사용하여 커스텀 애니메이션을 작성하는 방법을 알아보았습니다. ScrollReveal은 간단한 설정만으로도 웹 페이지에 멋진 애니메이션을 적용할 수 있는 강력한 도구입니다. 추가적인 상세한 옵션은 ScrollReveal 공식 문서를 참고해보세요.

참고 문서:

ScrollReveal 공식 문서