수직 스크롤 효과는 웹페이지에 동적인 사용자 경험을 제공하고 페이지의 시각적 흐름을 재미있게 만들어줍니다. ScrollReveal은 JavaScript 라이브러리로, 스크롤에 따라 요소가 페이드인되거나 애니메이션되도록 지원해줍니다.

ScrollReveal 설치하기

먼저, ScrollReveal을 사용하기 위해 다음과 같이 라이브러리를 설치해야합니다:

npm install scrollreveal

ScrollReveal 설정하기

다음으로, ScrollReveal 객체를 생성하고 원하는 옵션을 설정해야합니다. 예를 들어, 수직 스크롤 효과를 적용할 요소의 클래스가 animated이고 애니메이션 효과를 fadeIn으로 설정한다면, 다음과 같이 설정할 수 있습니다:

import ScrollReveal from 'scrollreveal';

const sr = ScrollReveal();

sr.reveal('.animated', {
  duration: 1000,
  origin: 'top',
  distance: '30px',
  delay: 200,
  opacity: 0,
  easing: 'ease-in-out',
  mobile: true
});

위의 설정에서 duration은 애니메이션의 지속 시간을, origin은 애니메이션 시작 위치를, distance는 애니메이션 이동 거리를, delay는 애니메이션 시작 전 대기 시간을, opacity는 애니메이션이 시작될 때의 투명도를, easing은 애니메이션의 이징을, mobile은 모바일 화면에서도 애니메이션을 적용할지 여부를 설정할 수 있습니다.

HTML 구조 설정하기

마지막으로, 스크롤 효과를 적용할 요소를 HTML 구조에 추가해야합니다. 예를 들어, animated 클래스를 가진 <div> 요소를 수직 스크롤 효과로 나타내고 싶다면, 다음과 같이 HTML을 작성할 수 있습니다:

<div class="animated">
  <!-- 요소의 내용 -->
</div>

결과 확인하기

설정을 마쳤으면, 웹페이지를 열어 스크롤을 내리면 설정한 애니메이션 효과가 적용되는 것을 확인할 수 있습니다. ScrollReveal을 사용하면 페이지의 특정 요소를 더욱 동적이고 흥미로운 방식으로 표현할 수 있습니다.

참고 자료

• ScrollReveal 공식 문서
• ScrollReveal GitHub 저장소