[javascript] ScrollReveal을 활용한 버튼 클릭 시 스크롤 이동 구현 방법

01 Dec 2023

javascript

1. ScrollReveal 라이브러리 설치하기

$ npm install scrollreveal

2. ScrollReveal 라이브러리 import하기

import ScrollReveal from 'scrollreveal';

3. ScrollReveal 초기화하기

ScrollReveal().reveal('.my-element', {
    delay: 200,
    distance: '50px',
    easing: 'ease-in-out',
});

4. 버튼 클릭 시 스크롤 이동 구현하기

const btn = document.querySelector('.scroll-btn');
btn.addEventListener('click', () => {
    const element = document.querySelector('.target-element');
    ScrollReveal().reveal(element, {
        delay: 200,
        distance: '50px',
        easing: 'ease-in-out',
    });
});

위의 코드는 ScrollReveal 라이브러리를 활용하여 버튼을 클릭할 때 지정한 요소로 스크롤 이동을 구현하는 방법을 보여줍니다. ScrollReveal은 여러 가지 애니메이션 효과를 제공하며, 각각의 요소에 적용할 수 있습니다.

위의 예시에서는 ScrollReveal의 reveal 메서드를 사용하여 my-element 클래스를 가진 요소들이 나타나는 애니메이션 효과를 설정했습니다. 버튼을 클릭할 때는 target-element 클래스를 가진 요소가 나타나도록 설정하였습니다.

각각의 요소에 대한 애니메이션 효과는 delay, distance, easing 등의 옵션을 설정하여 변경할 수 있습니다. 자세한 옵션은 ScrollReveal 공식 문서에서 확인할 수 있습니다.

참고 자료

ScrollReveal 공식 문서: link