ScrollReveal은 웹사이트의 스크롤 효과를 구현하기 위한 JavaScript 라이브러리입니다. 이 라이브러리를 이용하면 스크롤 시 요소가 한 번에 나타나는 것이 아니라, 페이드 인/아웃 등의 효과와 함께 딜레이를 설정할 수 있습니다. 이번 블로그에서는 ScrollReveal을 이용하여 스크롤 페이드 인/아웃 효과에 딜레이를 추가하는 방법을 알아보겠습니다.

1. ScrollReveal 라이브러리 가져오기

먼저, ScrollReveal 라이브러리를 다운로드하고 HTML 파일에 추가해야 합니다. 다음 CDN 링크를 이용하여 라이브러리를 가져옵니다.

<script src="https://unpkg.com/scrollreveal@4.1.1/dist/scrollreveal.min.js"></script>

2. 요소 설정하기

페이드 인/아웃 효과를 적용할 요소를 선택하고, 해당 요소에 ScrollReveal 클래스를 추가합니다. 효과를 적용하고 싶은 요소에 클래스를 지정해야 합니다.

<div class="scroll-reveal">
  <!-- 효과를 적용할 요소들 -->
</div>

3. ScrollReveal 초기화 및 옵션 설정하기

JavaScript 파일에서 ScrollReveal을 초기화하고 옵션을 설정합니다. 다음 코드는 Fade-in 효과와 함께 딜레이를 설정하는 예시입니다.

// ScrollReveal 초기화
const sr = ScrollReveal();

// 옵션 설정
sr.reveal('.scroll-reveal', {
  delay: 200, // 딜레이(ms) 설정
  duration: 1000, // 애니메이션 지속 시간(ms) 설정
  opacity: 0, // 초기 투명도 설정
  origin: 'bottom', // 나타날 방향 설정 ('bottom', 'top', 'left', 'right')
  distance: '20px', // 이동거리(px) 설정
});

위 코드에서 sr.reveal() 메소드를 사용하여 효과를 적용하고자 하는 클래스 이름을 전달합니다. delay 옵션을 사용하여 딜레이를 설정할 수 있습니다.

4. 결과 확인하기

위와 같이 ScrollReveal을 설정하고 나면, 스크롤과 함께 요소들이 페이드 인/아웃 효과와 함께 딜레이를 가지고 나타날 것입니다. 웹 페이지를 로드하여 스크롤 효과가 제대로 동작하는지 확인해보세요.

이제 ScrollReveal을 이용하여 스크롤 페이드 인/아웃 효과에 딜레이를 설정하는 방법을 알아봤습니다. ScrollReveal의 다양한 옵션을 적용하여 웹사이트에 동적인 효과를 추가할 수 있습니다. 더 자세한 내용은 ScrollReveal 공식 문서를 참고해보세요.