[javascript] ScrollReveal을 이용한 요소 사라짐 효과 구현 방법
ScrollReveal 라이브러리는 웹 페이지에서 스크롤에 따라 요소가 나타나거나 사라지는 효과를 구현할 수 있도록 도와주는 JavaScript 라이브러리입니다. 이를 사용하여 웹 요소의 사라짐 효과를 구현하는 방법을 알아보겠습니다.
1. ScrollReveal 라이브러리 설치
먼저 ScrollReveal 라이브러리를 설치해야 합니다. 아래의 명령을 사용하여 npm을 통해 설치할 수 있습니다.
npm install scrollreveal
또는 <script> 태그를 이용하여 CDN을 통해 라이브러리를 가져올 수도 있습니다. 아래의 코드를 HTML 파일의 <head> 태그 안에 추가합니다.
<script src="https://unpkg.com/scrollreveal@4.1.1/dist/scrollreveal.min.js"></script>
2. ScrollReveal을 이용한 요소 사라짐 효과 적용
사라짐 효과를 적용하고자 하는 요소에 sr 클래스를 추가합니다. 이후에 JavaScript를 사용하여 ScrollReveal 객체를 초기화하고 옵션을 설정합니다.
<div class="sr">나타날 요소</div>
window.sr = ScrollReveal();
sr.reveal('.sr', {
duration: 1000, // 효과 지속 시간 (밀리초 단위)
distance: '50px', // 요소가 나타나는 거리
origin: 'bottom', // 요소의 나타나는 시작 위치 (top, bottom, left, right)
opacity: 0, // 초기 투명도
});
3. 스크롤 이벤트에 ScrollReveal 적용
위의 코드는 페이지가 로드되었을 때 한 번만 실행되기 때문에 스크롤에 따라 요소가 사라지는 효과를 보려면 스크롤 이벤트에 ScrollReveal을 적용해야 합니다.
window.addEventListener('scroll', function() {
sr.reveal('.sr');
});
4. 스크롤 이벤트 최적화
스크롤 이벤트는 고성능의 이벤트이기 때문에 많은 동작에 영향을 줄 수 있습니다. 따라서 스크롤 이벤트를 최적화하는 것이 좋습니다. 예를 들어, requestAnimationFrame을 사용하여 스크롤 이벤트가 발생할 때마다 ScrollReveal을 실행하는 것보다 일정 주기마다 실행하는 것이 성능상 이점이 있습니다.
var scrollTimeout;
window.addEventListener('scroll', function() {
if (!scrollTimeout) {
scrollTimeout = setTimeout(function() {
sr.reveal('.sr');
scrollTimeout = null;
}, 200);
}
});
이제 ScrollReveal을 이용하여 요소의 사라짐 효과를 구현할 수 있습니다. ScrollReveal 라이브러리의 다양한 옵션을 활용하여 원하는 효과를 구현해보세요.