[javascript] ScrollReveal을 이용한 요소 파밍 효과 구현 방법

01 Dec 2023

javascript

개요

ScrollReveal은 웹 페이지에 스크롤링 효과를 적용하여 요소를 부드럽게 나타낼 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 스크롤을 내리면서 요소가 페이드 인 또는 슬라이드 인 효과와 함께 나타나는 등의 다양한 애니메이션 효과를 구현할 수 있습니다.

사용 방법

ScrollReveal 라이브러리를 다운로드하거나 CDN을 통해 불러옵니다.
HTML 문서에서 요소를 선택하고 효과를 적용할 클래스나 ID를 지정합니다.
JavaScript에서 ScrollReveal 객체를 생성하고 요소에 원하는 효과 옵션을 설정합니다.
ScrollReveal의 reveal() 메서드를 호출하여 요소를 나타낼 때의 애니메이션 효과를 설정합니다.

// 1. ScrollReveal 라이브러리 불러오기
<script src="https://unpkg.com/scrollreveal"></script>

// 2. 요소 선택 및 효과 적용
<div class="fade-in"></div>
<div class="slide-up"></div>

// 3. ScrollReveal 객체 생성 및 효과 옵션 설정
<script>
   const sr = ScrollReveal({
      origin: 'bottom',  // 요소의 나타날 원본 위치 설정
      distance: '20px',  // 원본 위치로부터 요소를 이동할 거리
      duration: 1000,  // 애니메이션 지속시간
      delay: 200,  // 애니메이션 시작 딜레이 시간
      opacity: 0,  // 초기 투명도 설정
      easing: 'ease-in-out',  // 애니메이션 가속도 설정
      reset: true  // 요소가 나타났다가 다시 사라질 때 애니메이션을 재시작할지 여부 설정
   });
   
   // 4. reveal() 메서드를 호출하여 효과 설정
   sr.reveal('.fade-in', { 
      origin: 'right',  // 요소의 나타날 원본 위치 설정
      distance: '50px',  // 원본 위치로부터 요소를 이동할 거리
      duration: 1500,  // 애니메이션 지속시간
      delay: 300,  // 애니메이션 시작 딜레이 시간
      opacity: 1,  // 최종 투명도 설정
      easing: 'ease-out',  // 애니메이션 가속도 설정
      reset: false  // 요소가 나타났다가 다시 사라질 때 애니메이션을 재시작할지 여부 설정
   });
   
   sr.reveal('.slide-up', { 
      origin: 'bottom',  // 요소의 나타날 원본 위치 설정
      distance: '100px',  // 원본 위치로부터 요소를 이동할 거리
      duration: 1000,  // 애니메이션 지속시간
      delay: 500,  // 애니메이션 시작 딜레이 시간
      opacity: 1,  // 최종 투명도 설정
      easing: 'ease-in-out',  // 애니메이션 가속도 설정
      reset: false  // 요소가 나타났다가 다시 사라질 때 애니메이션을 재시작할지 여부 설정
   });
</script>

결과 확인

위의 코드를 적용하면 HTML 문서에서 .fade-in 클래스가 지정된 요소는 오른쪽에서 나타나는 페이드 인 효과를 가지며, .slide-up 클래스가 지정된 요소는 아래에서 위로 슬라이드되며 나타납니다. 스크롤을 내리면 요소들이 부드럽게 나타나는 것을 확인할 수 있습니다.

참고 자료

ScrollReveal GitHub: https://github.com/jlmakes/scrollreveal
ScrollReveal Documentation: https://scrollrevealjs.org/