ScrollReveal은 웹 페이지에서 스크롤이 내려갈 때 요소를 부드럽게 나타내는 애니메이션 효과를 제공하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지의 시각적인 효과를 향상시킬 수 있습니다.

ScrollReveal 설치

ScrollReveal은 NPM을 통해 쉽게 설치할 수 있습니다. 아래의 명령어를 사용하여 설치합니다.

npm install scrollreveal

ScrollReveal을 사용한 요소 드롭다운 애니메이션 구현

먼저, ScrollReveal을 불러와서 초기화해야 합니다. 아래의 코드를 HTML 파일의 <script> 태그 안에 넣어주세요.

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

다음으로, ScrollReveal로 애니메이션을 적용할 요소를 선택해야 합니다. 제어하려는 요소에 data-sr 속성을 추가하고 원하는 애니메이션 클래스를 값을 설정합니다. 아래의 예시를 참고해주세요.

<div class="reveal" data-sr="enter left ease-out 100px">
  요소
</div>

위의 코드에서 enter left ease-out 100px는 요소가 스크롤을 내릴 때 왼쪽에서 드롭다운 애니메이션을 수행하며, 100px 만큼 이동한다는 의미입니다.

마지막으로, ScrollReveal을 초기화하고 애니메이션을 적용하는 스크립트를 작성합니다. 아래의 코드를 <script> 태그 안에 넣어주세요.

<script>
  window.sr = ScrollReveal();

  sr.reveal('.reveal', {
    duration: 1000,      // 애니메이션 지속 시간 (밀리초)
    distance: '100px',   // 이동 거리
    delay: 200,          // 애니메이션 딜레이 (밀리초)
    reset: true          // 스크롤 올라갈 때 애니메이션을 반복할지 여부
  });
</script>

위의 코드에서 reveal 클래스를 가진 요소들에 애니메이션을 적용하며, 애니메이션의 설정을 구체적으로 지정할 수 있습니다. duration, distance, delay, reset 등의 속성값을 원하는 대로 조정하여 애니메이션을 커스터마이징할 수 있습니다.

결론

ScrollReveal을 사용하면 웹 페이지에서 요소의 나타나는 애니메이션을 부드럽게 구현할 수 있습니다. ScrollReveal을 적용하여 사용자 경험을 향상시켜보세요.

참고 자료

• ScrollReveal 공식 레포지토리