[javascript] ScrollReveal을 이용한 페이드 아웃 효과 구현 방법

01 Dec 2023

javascript

페이지 스크롤 시 요소들에 페이드 아웃 효과를 적용하고 싶다면 ScrollReveal 라이브러리를 사용할 수 있습니다. ScrollReveal은 CSS 기반으로 요소들을 애니메이션화하여 화면에 나타날 때 효과를 주는 라이브러리입니다.

ScrollReveal 설치

먼저 ScrollReveal 라이브러리를 설치해야 합니다. npm을 사용한다면 다음 명령어를 실행하세요:

npm install scrollreveal

혹은 CDN을 사용하고자 한다면 HTML 파일의 <head> 태그 내에 다음 스크립트 태그를 추가하세요:

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

ScrollReveal을 사용하여 페이드 아웃 효과 적용하기

HTML 요소에 data-sr 속성을 추가하고 효과를 적용하고자 하는 CSS 클래스를 지정합니다.
```
<h1 data-sr="fade out" class="fade-out-effect">페이드 아웃 효과</h1>
```

JavaScript 파일에 ScrollReveal을 초기화합니다.

import ScrollReveal from 'scrollreveal';

const sr = ScrollReveal();

ScrollReveal 객체의 reveal() 메서드를 사용하여 효과를 적용할 요소를 선택합니다.
```
const elements = document.querySelectorAll('[data-sr]');
```
선택된 요소에 효과를 적용합니다.
```
elements.forEach((element) => {
  sr.reveal(element, {
    delay: 200,
    distance: '50px',
    origin: 'bottom',
    opacity: 0,
  });
});
```
이 예제에서는 요소가 화면에 진입하는 방향이 ‘bottom’이며, 200ms의 지연시간 후에 나타나며, 거리는 50px 만큼 갭을 두고 페이드 아웃 효과를 적용합니다.

추가 옵션 설정하기

ScrollReveal은 다양한 옵션을 제공하므로 페이드 아웃 효과를 세밀하게 제어할 수 있습니다. 예를 들어, 지연시간, 애니메이션 속도, 진입 방향 등을 설정할 수 있습니다. 자세한 내용은 ScrollReveal 공식 문서를 참고하세요.

결론

ScrollReveal 라이브러리를 사용하면 간단하게 페이지 스크롤 시 페이드 아웃 효과를 구현할 수 있습니다. 애니메이션을 적용하고자 하는 요소에 data-sr 속성을 추가하고 ScrollReveal 설정을 통해 세부 조정하면 됩니다. ScrollReveal을 사용하여 페이지에 동적인 효과를 추가해보세요!