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

01 Dec 2023

javascript

ScrollReveal은 웹 페이지에 스크롤할 때 요소들이 일정한 순서로 나타나는 효과를 구현하기 위한 자바스크립트 라이브러리입니다. 이를 이용하여 요소를 슬라이스 인하는 효과를 구현하는 방법을 알아보겠습니다.

ScrollReveal 라이브러리 추가하기

먼저, ScrollReveal 라이브러리를 추가해야 합니다. 아래의 코드는 <head> 태그 안에 <script> 태그를 추가하여 ScrollReveal 라이브러리를 로드하는 코드입니다.

<script src="https://unpkg.com/scrollreveal" defer></script>

defer 속성을 추가하여 스크립트가 페이지 로딩 완료 후 실행되도록 설정합니다.

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

이제 ScrollReveal을 이용하여 요소에 슬라이스 인 효과를 적용해봅시다.

<div class="reveal">
  <h2>Hello, World!</h2>
  <p>Welcome to my website.</p>
</div>

위의 코드는 <div> 요소 안에 <h2>와 <p> 요소를 포함한 예시입니다.

자바스크립트 파일을 생성하고 아래의 코드를 추가합니다.

// ScrollReveal 초기화
ScrollReveal().reveal('.reveal', {
  duration: 1000, // 애니메이션 지속 시간 (밀리초)
  origin: 'left', // 요소가 나타날 시작 위치
  distance: '50px', // 슬라이스 인 거리
  opacity: 0, // 초기 투명도
  easing: 'ease-in-out', // 애니메이션 이징
  interval: 200 // 요소들 간의 애니메이션 간격
});

위의 코드에서 ScrollReveal().reveal() 함수를 사용하여 .reveal 클래스를 가진 요소에 애니메이션 효과를 적용합니다. duration은 애니메이션 지속 시간, origin은 요소가 나타날 시작 위치, distance는 슬라이스 인 거리, opacity는 초기 투명도, easing은 애니메이션 이징, interval은 요소들 간의 애니메이션 간격을 설정하는 옵션입니다.

마무리

위에서 설명한 방법으로 ScrollReveal을 이용하여 요소 슬라이스 인 효과를 구현할 수 있습니다. ScrollReveal은 다양한 옵션을 제공하므로 필요에 따라 다양한 효과를 구현할 수 있습니다. 더 자세한 내용은 ScrollReveal 공식 문서를 참고하시기 바랍니다.

공식 문서: ScrollReveal

Happy coding!😉