ScrollReveal은 JavaScript 라이브러리로, 웹 페이지 스크롤링 시 요소들을 동적으로 표시하고 애니메이션 효과를 부여할 수 있습니다. 이번에는 ScrollReveal을 사용하여 요소의 투명도를 변경하는 효과를 구현해보겠습니다.

1. ScrollReveal 라이브러리 설치

먼저, ScrollReveal 라이브러리를 웹 프로젝트에 설치해야 합니다. 아래의 명령어를 사용하여 npm으로 ScrollReveal을 설치합니다.

npm install scrollreveal

2. ScrollReveal 설정

ScrollReveal을 사용하기 위해 JavaScript 파일에 다음과 같은 코드를 추가합니다.

import ScrollReveal from 'scrollreveal';

const sr = ScrollReveal();

sr.reveal('.fade-in', {
  opacity: 0,
  distance: '50px',
  duration: 1000,
  easing: 'ease-in-out',
});

위 코드에서는 ScrollReveal 객체를 생성하고, reveal 메소드를 사용하여 .fade-in 클래스를 가진 요소들을 선택합니다. 그리고 이러한 요소들에게 투명도를 0으로 설정하고, 50px 거리에서 1000ms 동안 애니메이션 효과를 적용합니다.

3. HTML 요소에 클래스 추가

투명도를 변경하고자 하는 HTML 요소에 .fade-in 클래스를 추가합니다.

<div class="fade-in">
  <h1>Welcome to my website!</h1>
  <p>This is some content that will fade in on scroll.</p>
</div>

4. CSS 스타일 설정

요소에 투명도를 변경하는 ScrollReveal 효과를 적용하기 위해 CSS 스타일을 추가합니다.

.fade-in {
  opacity: 0;
}

5. 테스트 및 결과 확인

웹 페이지를 실행하고 스크롤을 내릴 때, .fade-in 클래스를 가진 요소들이 부드럽게 나타나는 것을 확인할 수 있습니다.

참고 자료

• ScrollReveal 공식 문서
• ScrollReveal GitHub 레포지토리