[javascript] ScrollReveal을 이용한 다른 요소와의 연동 효과 구현 방법

01 Dec 2023

javascript

ScrollReveal은 웹 페이지에서 스크롤 이벤트에 따라 요소를 애니메이션화하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 웹 페이지를 스크롤할 때 요소들이 부드럽게 나타나거나 사라지는 효과를 구현할 수 있습니다. 이번 글에서는 ScrollReveal을 이용하여 다른 요소와의 연동 효과를 구현하는 방법에 대해 알아보겠습니다.

ScrollReveal 설치

ScrollReveal을 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. 아래 명령을 사용하여 npm으로 설치할 수 있습니다.

npm install scrollreveal

또는 CDN을 이용하여 웹페이지에 직접 링크를 추가할 수도 있습니다.

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

ScrollReveal 기본 사용법

ScrollReveal은 매우 간단하게 사용할 수 있습니다. 우선 ScrollReveal 객체를 생성하고, 애니메이션을 적용할 요소에 클래스나 ID를 지정합니다. 그리고 ScrollReveal의 reveal() 메서드를 호출하여 요소를 애니메이션화합니다.

// ScrollReveal 객체 생성
const sr = ScrollReveal();

// 애니메이션을 적용할 요소 지정
const element = document.querySelector('.my-element');

// 요소에 애니메이션 적용
sr.reveal(element, {
    duration: 1000,     // 애니메이션 지속 시간 (밀리초)
    origin: 'left',     // 요소가 나타날 위치
    distance: '100px',  // 요소의 이동 거리
    delay: 500,         // 애니메이션 시작까지의 지연 시간 (밀리초)
    easing: 'ease-in',  // 애니메이션의 속도 곡선
    reset: false        // 요소의 초기 위치로 되돌아가는지 여부
});

위 예제에서는 .my-element 클래스를 가진 요소를 왼쪽에서 오른쪽으로 이동시키는 애니메이션이 적용됩니다. duration, origin, distance, delay, easing 등 다양한 옵션을 설정하여 원하는 효과를 구현할 수 있습니다.

다른 요소와의 연동 효과 구현

ScrollReveal을 이용하여 다른 요소와의 연동 효과를 구현하려면, 이벤트 리스너를 활용하여 ScrollReveal이 호출될 때마다 연동 효과를 처리해주어야 합니다. 예를 들어, 스크롤 이벤트가 발생하면 요소가 나타나는 동시에 다른 요소도 나타나도록 할 수 있습니다.

// ScrollReveal 객체 생성
const sr = ScrollReveal();

// 애니메이션을 적용할 요소 지정
const element1 = document.querySelector('.element1');
const element2 = document.querySelector('.element2');

// 요소에 애니메이션 적용
sr.reveal(element1, {
    duration: 1000,
    origin: 'left',
    distance: '100px',
    delay: 500
});

// 스크롤 이벤트 리스너 등록
window.addEventListener('scroll', () => {
    const element1Position = element1.getBoundingClientRect().top;
    const element2Position = element2.getBoundingClientRect().top;
    const windowHeight = window.innerHeight;

    // element1이 화면에 나타났을 때 element2도 나타나도록 애니메이션 적용
    if (element1Position < windowHeight) {
        sr.reveal(element2, {
            duration: 1000,
            origin: 'left',
            distance: '100px',
            delay: 500
        });
    }
})

위 예제에서는 element1이 화면에 나타나면 element2도 나타나도록 ScrollReveal을 설정한 부분이 추가되었습니다. 스크롤 이벤트 리스너를 등록하고, element1의 위치를 체크하여 화면에 나타났을 때 element2에 애니메이션을 적용합니다.

마무리

ScrollReveal을 이용하여 다른 요소와의 연동 효과를 구현할 수 있습니다. 웹페이지를 스크롤할 때 요소들이 부드럽게 나타나는 효과를 추가하여 사용자에게 더욱 흥미롭고 직관적인 웹 경험을 제공할 수 있습니다. ScrollReveal의 다양한 옵션을 활용하여 원하는 효과를 구현해보세요!

참고 문서: