[javascript] ScrollReveal을 이용한 텍스트 애니메이션 구현 방법

01 Dec 2023

javascript

페이지 스크롤에 따라 텍스트가 부드럽게 나타나거나 사라지는 애니메이션 효과를 주고 싶다면 ScrollReveal 라이브러리를 활용할 수 있습니다. 이번 글에서는 ScrollReveal을 사용하여 텍스트 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

ScrollReveal 설치

우선, ScrollReveal을 사용하기 위해 먼저 라이브러리를 설치해야 합니다. 아래 명령어를 사용하여 npm을 통해 ScrollReveal을 설치하세요.

npm install scrollreveal

ScrollReveal을 통한 텍스트 애니메이션 구현

HTML 파일에 ScrollReveal 라이브러리를 로드합니다.

<html>
  <head>
    <script src="scrollreveal.min.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

애니메이션을 적용할 텍스트 요소에 data-sr 속성을 추가합니다. 이 속성은 텍스트가 나타나는 위치와 애니메이션 효과를 지정합니다.

<html>
  <head>
    <script src="scrollreveal.min.js"></script>
  </head>
  <body>
    <h1 data-sr="enter bottom">안녕하세요!</h1>
    ...
  </body>
</html>

JavaScript 파일에서 ScrollReveal을 초기화하고 텍스트 애니메이션을 적용합니다.

const sr = ScrollReveal();

sr.reveal('[data-sr]', {
  duration: 1000,
  origin: 'bottom',
  distance: '50px',
  delay: 200,
  easing: 'ease',
});

위 코드에서 '[data-sr]'는 data-sr 속성을 가진 모든 요소를 선택합니다. 애니메이션의 지속 시간(duration), 시작 위치(origin), 이동 거리(distance), 시작 지연 시간(delay), 이징 효과(easing) 등을 설정할 수 있습니다.

결과 확인

ScrollReveal 라이브러리를 사용하여 텍스트 애니메이션을 구현한 결과를 확인하는 방법은 애플리케이션을 실행하고 스크롤을 내리는 것입니다. 페이지 스크롤에 따라 텍스트가 설정한 애니메이션 효과에 맞춰 보여질 것입니다.

위 예시 코드를 적용하여 텍스트 애니메이션을 구현해보세요. ScrollReveal을 사용하면 페이지 스크롤에 반응하는 텍스트 애니메이션을 간단하게 구현할 수 있습니다.

더 자세한 정보는 ScrollReveal 공식 문서를 참조하세요.

이상으로 ScrollReveal을 이용한 텍스트 애니메이션 구현 방법에 대해 알아보았습니다. 감사합니다!