[javascript] ScrollReveal 개요
ScrollReveal은 웹 페이지의 요소들을 스크롤할 때 애니메이션 효과를 적용하는 라이브러리입니다. 이를 사용하면 사용자가 화면을 스크롤할 때 요소들이 부드럽게 나타나거나 사라지는 효과를 만들 수 있습니다. ScrollReveal은 JavaScript로 작성되었으며, 간단하게 웹 페이지에 추가하여 사용할 수 있습니다.
설치
ScrollReveal은 npm을 통해 설치할 수 있습니다.
npm install scrollreveal
또는 CDN을 통해 스크립트 파일을 추가할 수도 있습니다.
<script src="https://unpkg.com/scrollreveal"></script>
사용 방법
ScrollReveal을 사용하기 위해서는 다음의 세 단계를 따르면 됩니다.
- 스크립트 파일을 웹 페이지에 추가합니다.
<script src="https://unpkg.com/scrollreveal"></script>
- ScrollReveal 인스턴스를 생성하고 원하는 요소에 애니메이션 효과를 적용합니다.
const sr = ScrollReveal();
sr.reveal('.element', {
duration: 1000,
delay: 200,
distance: '50px',
easing: 'ease-in-out',
});
위의 예제에서 .element는 애니메이션 효과를 적용할 요소의 CSS 선택자입니다. duration은 애니메이션의 지속 시간을 나타내며, delay는 애니메이션 시작 전의 대기 시간을 나타냅니다. distance는 애니메이션의 이동 거리를 나타내고, easing은 애니메이션의 동작을 조절합니다.
- ScrollReveal을 활성화합니다.
sr.reveal('.element');
위의 코드는 .element로 설정된 요소에 등록된 애니메이션 효과를 활성화합니다.
추가 옵션
ScrollReveal에는 다양한 옵션을 설정할 수 있습니다. 일부 중요한 옵션은 다음과 같습니다.
origin: 애니메이션의 시작 위치를 지정합니다.rotate: 요소가 회전하는 애니메이션 효과를 추가합니다.scale: 요소의 크기를 조절하는 애니메이션 효과를 추가합니다.reset: 스크롤에 의해 요소가 사라졌다가 다시 나타날 때 애니메이션을 리셋합니다.
이 외에도 ScrollReveal은 다양한 커스텀 옵션 및 콜백 함수를 제공합니다.