[javascript] ScrollReveal을 이용한 요소 보여주기/숨기기 효과 구현 방법

01 Dec 2023

javascript

ScrollReveal은 웹 페이지의 스크롤 이벤트에 따라 요소를 동적으로 보여주거나 숨길 수 있는 JavaScript 라이브러리입니다. 사용자가 페이지를 스크롤할 때 요소가 부드럽게 나타나고 사라지는 효과를 구현할 수 있습니다.

1. ScrollReveal 설치하기

먼저 ScrollReveal을 설치해야 합니다. npm을 사용하는 경우, 다음의 명령어를 사용하여 설치할 수 있습니다:

npm install scrollreveal

다운로드할 수도 있으며, ScrollReveal의 공식 웹사이트에서 직접 다운로드하여 사용할 수 있습니다.

2. ScrollReveal 초기화하기

ScrollReveal을 사용하기 위해 페이지에서 라이브러리를 초기화해야 합니다. 다음과 같이 코드를 작성할 수 있습니다:

import ScrollReveal from 'scrollreveal';

const sr = ScrollReveal();

sr.reveal('.element', {
  duration: 1000,
  delay: 200,
  distance: '50px',
  origin: 'left',
  easing: 'ease-in-out',
});

위의 코드에서는 ScrollReveal 객체를 생성한 뒤, reveal 메서드를 사용하여 요소를 설정합니다. document.querySelectorAll와 유사한 선택자를 사용하여 보여주거나 숨길 요소를 선택하고, 여러 옵션을 설정할 수 있습니다. 위의 예시에서는 duration, delay, distance, origin, easing 등의 옵션을 설정하였습니다. 자세한 옵션은 ScrollReveal의 공식 문서를 참조하세요.

3. 스크롤 이벤트 리스너 추가하기

ScrollReveal은 스크롤 이벤트에 따라 요소를 보여주거나 숨기므로, 페이지에 스크롤 이벤트 리스너를 추가해야 합니다. 다음과 같이 코드를 작성할 수 있습니다:

window.addEventListener('scroll', () => {
  sr.reveal('.element');
});

위의 코드는 스크롤 이벤트가 발생할 때마다 ScrollReveal의 reveal 메서드를 호출하여 요소를 보여줍니다. '.element'는 보여주거나 숨길 요소의 선택자입니다.

4. CSS 애니메이션 추가하기

ScrollReveal을 사용하여 요소를 보여주거나 숨기는 효과를 구현할 수도 있지만, CSS 애니메이션을 추가하여 더 다양한 효과를 구현할 수도 있습니다. 예를 들어, 아래의 CSS 코드를 사용하여 요소를 서서히 나타나게 할 수 있습니다:

.element {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.element.reveal {
  opacity: 1;
}

위의 코드에서는 요소의 opacity 속성을 0으로 설정하고, 트랜지션을 사용하여 1초의 시간 동안 서서히 나타나게 합니다. 이후 ScrollReveal에서 해당 요소를 보여줄 때, reveal 클래스를 요소에 추가하여 애니메이션을 활성화합니다.

5. 마무리

이제 ScrollReveal을 사용해서 웹 페이지에 요소 보여주기/숨기기 효과를 구현할 수 있습니다. ScrollReveal의 다양한 옵션과 CSS 애니메이션을 활용하여 원하는 디자인과 효과를 구현해보세요. ScrollReveal의 공식 문서 및 예제 코드를 참고하면 더 다양한 기능을 활용할 수 있습니다. 간단한 Javascript 구문을 사용하여 웹 페이지에 생동감을 불어넣을 수 있습니다.

참고 자료

ScrollReveal 공식 문서: https://scrollrevealjs.org/
ScrollReveal 예제 코드: https://scrollrevealjs.org/examples/