[javascript] ScrollReveal을 이용한 요소 슬라이딩 효과 구현 방법

01 Dec 2023

javascript

많은 웹 사이트에서 요소들이 스크롤하면서 나타나거나 사라지는 효과를 볼 수 있습니다. 이러한 효과를 구현하려면 JavaScript 라이브러리를 활용할 수 있는데, 이 가운데 ScrollReveal은 많은 웹 개발자들이 선호하는 선택입니다. ScrollReveal은 스크롤 이벤트를 감지하여 요소의 애니메이션 효과를 적용하는 데 도움을 줍니다.

ScrollReveal 설치 및 설정

먼저 ScrollReveal을 사용하기 위해 프로젝트에 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 npm을 통해 ScrollReveal을 설치합니다.

npm install scrollreveal

ScrollReveal이 설치되면 JavaScript 파일에서 라이브러리를 import 하여 사용할 수 있습니다.

import ScrollReveal from 'scrollreveal';

요소에 슬라이딩 효과 적용하기

ScrollReveal을 사용하여 요소에 슬라이딩 효과를 적용하는 방법은 다음과 같습니다.

const sr = ScrollReveal();

sr.reveal('.element', {
  origin: 'left',  // 요소가 나타날 시작 지점 (top, right, bottom, left)
  distance: '50px', // 요소가 움직일 거리
  duration: 1000, // 애니메이션의 지속 시간 (밀리초)
  delay: 0, // 애니메이션의 지연 시간 (밀리초)
  easing: 'ease', // 애니메이션의 속도 곡선
  reset: false, // 스크롤 시 애니메이션을 재설정할지 여부
});

위의 코드에서 .element는 슬라이딩 효과를 적용하려는 요소의 클래스명입니다. 원하는 선택자를 사용하여 해당하는 요소에 효과를 적용할 수 있습니다.

요소 슬라이딩 효과 다양하게 사용하기

ScrollReveal은 많은 옵션을 제공하여 다양한 슬라이딩 효과를 구현할 수 있습니다. 몇 가지의 예시를 살펴보겠습니다.

텍스트 효과

sr.reveal('.element', {
  origin: 'top',
  distance: '50px',
  duration: 1000,
  delay: 0,
  easing: 'ease',
  reset: false,
  rotate: { x: 0, y: 0, z: 0 },
  scale: 1,
  opacity: 0,
  mobile: true,
  mobile: true,
  beforeReveal: function (domEl) {
    domEl.style.transform = 'translateY(30px)';
  },
  beforeReset: function (domEl) {
    domEl.style.transform = 'translateY(0)';
  },
});

위의 예제는 요소가 위에서 아래로 슬라이딩하며 나타나는 효과를 구현합니다.

이미지 효과

sr.reveal('.element', {
  origin: 'right',
  distance: '50px',
  duration: 1000,
  delay: 0,
  easing: 'ease',
  reset: false,
  rotate: { x: 0, y: 0, z: 0 },
  scale: 1,
  opacity: 0,
  mobile: true,
  mobile: true,
  beforeReveal: function (domEl) {
    domEl.style.transform = 'scale(0.8)';
  },
  beforeReset: function (domEl) {
    domEl.style.transform = 'scale(1)';
  },
});

위의 예제는 이미지가 오른쪽에서 왼쪽으로 슬라이딩하면서 나타나는 효과입니다.

결론

ScrollReveal은 간단한 설정만으로도 요소에 다양한 슬라이딩 효과를 적용할 수 있습니다. 이를 통해 웹 사이트에 동적이고 매력적인 사용자 경험을 제공할 수 있습니다. ScrollReveal을 사용하여 프로젝트에 흥미로운 스크롤 효과를 구현해 보세요.

참고 자료

ScrollReveal 공식 문서: https://scrollrevealjs.org/