이번에는 ScrollReveal 라이브러리를 사용하여 수평 스크롤 페이드 인/아웃 효과를 구현하는 방법을 알아보겠습니다. ScrollReveal은 웹페이지에서 스크롤 할 때 요소가 나타나는 애니메이션 효과를 쉽게 구현할 수 있는 자바스크립트 라이브러리입니다.
ScrollReveal 설치하기
우선 ScrollReveal을 사용하기 위해서는 먼저 라이브러리를 설치해야 합니다. 아래 명령어를 사용하여 npm으로 ScrollReveal을 설치합니다.
npm install scrollreveal
ScrollReveal 설정하기
ScrollReveal을 설치했다면, 이제 자바스크립트 파일에 ScrollReveal을 가져온 후 초기 설정을 해줍니다.
import ScrollReveal from 'scrollreveal';
ScrollReveal().reveal('.fade-in', {
origin: 'left',
distance: '100px',
duration: 1000,
opacity: 0,
easing: 'ease-in-out',
reset: true,
});
위 코드에서 '.fade-in'은 페이드 인/아웃 효과를 적용할 요소의 클래스를 나타냅니다. origin은 요소가 나타나는 방향을 지정하고, distance는 요소가 움직일 거리를 지정합니다. duration은 애니메이션의 지속시간을 설정하며, opacity는 시작할 때 요소의 투명도를 지정합니다. easing은 애니메이션의 가속도를 지정하는데 사용되고, reset은 스크롤이 되돌아가거나 페이지를 새로고침할 때 애니메이션이 리셋되는지 여부를 설정합니다.
HTML 요소에 클래스 추가하기
페이드 인/아웃 효과를 적용할 HTML 요소에 .fade-in 클래스를 추가해줍니다. 이 클래스를 사용하여 ScrollReveal에 요소를 식별할 수 있습니다.
<div class="fade-in">
<!-- 페이드 인/아웃 효과를 적용할 내용 -->
</div>
위의 예시에서는 <div> 요소에 .fade-in 클래스를 추가했습니다.
스타일 설정하기
추가한 .fade-in 클래스에 효과를 적용하기 위해 CSS 스타일을 설정합니다. 아래는 예시입니다.
.fade-in {
opacity: 0;
transition: opacity 1s;
}
.fade-in.show {
opacity: 1;
}
위의 예시에서는 .fade-in 클래스의 초기 투명도를 0으로 설정하고, 1초 동안 투명도가 변경될 수 있도록 설정했습니다. 그리고 ScrollReveal이 요소에 효과를 적용할 때 .show 클래스를 추가하여 투명도를 1로 변경합니다.
결과 확인하기
이제 작성한 코드를 저장하고 웹페이지를 열어 스크롤 해보면 .fade-in 클래스를 가진 요소들이 수평으로 스크롤되면서 페이드 인/아웃 효과가 적용되는 것을 확인할 수 있습니다.