[javascript] ScrollReveal을 활용한 수동 스크롤 제어 방법

01 Dec 2023

javascript

ScrollReveal은 웹 페이지에서 스크롤에 따라 요소가 나타나고 사라지는 애니메이션 효과를 쉽게 구현할 수 있는 JavaScript 라이브러리입니다. 이번 블로그 포스트에서는 ScrollReveal을 활용하여 수동으로 스크롤을 제어하는 방법에 대해 알아보겠습니다.

ScrollReveal 설치

우선 ScrollReveal을 사용하기 위해 npm을 통해 설치해야 합니다. 아래 명령어를 사용하여 ScrollReveal을 설치합니다.

npm install scrollreveal

ScrollReveal 사용법

HTML 요소 준비하기

ScrollReveal을 적용하려는 HTML 요소에 data-sr 속성을 추가합니다. 이 속성은 애니메이션 효과가 적용될 요소를 지정하는 역할을 합니다.
```
<div data-sr></div>
```
JavaScript 코드 작성하기

ScrollReveal을 사용하기 위해 JavaScript 코드를 작성합니다. ScrollReveal 라이브러리를 임포트한 후, ScrollReveal() 함수를 호출하여 인스턴스를 생성합니다.
```
import ScrollReveal from 'scrollreveal';

const sr = ScrollReveal();
```
애니메이션 설정하기

애니메이션 효과를 적용할 요소에 대해 다양한 설정을 할 수 있습니다. 아래는 몇 가지 예시입니다.
```
sr.reveal('[data-sr]', {
  origin: 'left',
  distance: '50px',
  duration: 1000,
  delay: 200,
});
```
위 설정은 스크롤 시 왼쪽에서 50px 거리만큼 이동하며 1000ms 동안 애니메이션 효과가 적용되고, 시작이 200ms 지연됨을 의미합니다.
ScrollReveal 실행하기

ScrollReveal을 실행하기 위해 sr.reveal() 메서드를 호출합니다.
```
sr.reveal('[data-sr]');
```
위 코드는 data-sr 속성을 가진 모든 요소에 대해 애니메이션 효과를 적용합니다.

수동 스크롤 제어하기

ScrollReveal을 활용하여 수동으로 스크롤을 제어하려면 일부 추가적인 설정이 필요합니다.

ScrollReveal 필터 설정하기

ScrollReveal을 사용하여 특정 조건에 따라 애니메이션 효과를 적용하려면 필터 설정이 필요합니다. 아래는 예시입니다.
```
sr.reveal('[data-sr]', { 
  beforeReveal: (domEl) => {
    // 특정 조건에 따른 애니메이션 효과
  },
});
```
beforeReveal 콜백 함수를 활용하여 특정 조건을 만족할 때 애니메이션 효과를 적용할 수 있습니다.
스크롤 이벤트 등록하기

스크롤 이벤트를 등록하여 스크롤 위치에 따라 필터가 동작하도록 합니다.
```
window.addEventListener('scroll', () => {
  sr.sync();
});
```
위 코드는 스크롤 이벤트가 발생할 때마다 ScrollReveal 필터를 동기화합니다.

결론

ScrollReveal을 활용하여 웹 페이지의 스크롤 이벤트에 따라 요소를 나타내고 사라지게 만드는 기능을 구현할 수 있습니다. 필터 설정을 통해 특정 조건에 따라 애니메이션 효과를 적용할 수 있으며, 수동으로 스크롤을 제어할 수도 있습니다. ScrollReveal을 잘 활용하여 독특하고 효과적인 웹 페이지를 만들어보세요.

ScrollReveal 설치

ScrollReveal 사용법

수동 스크롤 제어하기

결론

참고 자료