개요

ScrollReveal은 웹사이트나 앱에서 스크롤 이벤트에 따라 요소의 트랜스폼 애니메이션을 구현할 수 있는 자바스크립트 라이브러리입니다. 이를 사용하면 사용자가 페이지를 아래로 스크롤할 때 요소들이 부드럽게 나타나거나 변형되는 효과를 적용할 수 있습니다.

설치

npm install scrollreveal

또는 CDN을 사용하여 다음과 같이 라이브러리를 추가할 수 있습니다.

<script src="https://unpkg.com/scrollreveal"></script>

사용 방법

1. ScrollReveal 라이브러리를 페이지에 추가합니다.

<script src="https://unpkg.com/scrollreveal"></script>

1. 스크롤 이벤트를 감지할 요소에 클래스를 추가합니다.

<div class="sr"></div>

1. 자바스크립트 파일에 ScrollReveal을 초기화하고 옵션을 설정합니다.

window.sr = ScrollReveal();
sr.reveal('.sr', {
  duration: 1000,
  origin: 'bottom',
  distance: '50px',
  delay: 300,
  easing: 'ease',
  opacity: 0,
  rotate: { x: 0, y: 0, z: 0 },
  scale: 1,
});

여기서 옵션은 다음과 같습니다:

• duration: 애니메이션의 지속 시간을 밀리초 단위로 설정합니다.
• origin: 요소의 나타나는 위치를 설정합니다. 다양한 값을 사용할 수 있습니다. (top, right, bottom, left 등)
• distance: 요소의 이동 거리를 설정합니다.
• delay: 애니메이션 시작 전 지연 시간을 밀리초 단위로 설정합니다.
• easing: 애니메이션의 이징을 설정합니다.
• opacity: 요소의 투명도를 설정합니다. (0-1 사이의 값)
• rotate: 요소의 회전 값을 설정합니다.
• scale: 요소의 크기 비율을 설정합니다.

1. 페이지를 스크롤하면서 요소가 애니메이션으로 나타납니다.

예제

다음은 ScrollReveal을 사용하여 요소가 아래로 스크롤되면서 서서히 나타나는 예제 코드입니다.

<style>
.sr {
  opacity: 0;
}
</style>

<div class="sr">
  <h1>ScrollReveal Example</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<script src="https://unpkg.com/scrollreveal"></script>
<script>
window.sr = ScrollReveal();
sr.reveal('.sr', {
  duration: 1000,
  origin: 'bottom',
  distance: '50px',
  delay: 300,
  easing: 'ease',
  opacity: 0,
  rotate: { x: 0, y: 0, z: 0 },
  scale: 1,
});
</script>

결론

ScrollReveal을 사용하면 스크롤 이벤트에 따라 요소의 트랜스폼 애니메이션을 쉽게 구현할 수 있습니다. 다양한 옵션을 설정하여 자신에게 적합한 애니메이션 효과를 만들어보세요.

참고 자료

• ScrollReveal 공식 문서: https://scrollrevealjs.org/
• ScrollReveal GitHub 저장소: https://github.com/jlmakes/scrollreveal