[javascript] ScrollReveal을 이용한 요소 스크롤 회전 효과 구현 방법

01 Dec 2023

javascript

ScrollReveal은 웹 요소의 스크롤 이벤트를 감지하여 요소가 나타나는 동안 효과적인 애니메이션을 제공하는 JavaScript 라이브러리입니다. ScrollReveal을 사용하면 스크롤을 내릴 때 요소가 회전하면서 나타나는 효과를 구현할 수 있습니다. 이제 ScrollReveal을 사용하여 요소 스크롤 회전 효과를 구현하는 방법을 알아보겠습니다.

1. ScrollReveal 설치

먼저, ScrollReveal을 웹 프로젝트에 설치해야 합니다. NPM을 사용하는 경우 다음 명령을 실행하여 ScrollReveal을 설치합니다.

npm install scrollreveal

이미지 및 CSS 파일을 로드하는 경우 HTML 파일에 ScrollReveal 스크립트를 포함해야 합니다. 다음과 같이 <head> 태그 내에 스크립트를 추가합니다.

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

2. ScrollReveal 설정

const sr = ScrollReveal({
  duration: 1000, // 애니메이션 지속 시간 (in milliseconds)
  distance: '50px', // 요소의 이동 거리
  rotate: {
    x: 180, // X 축 회전 각도 (in degrees)
    y: 180, // Y 축 회전 각도 (in degrees)
    z: 180, // Z 축 회전 각도 (in degrees)
  },
});

// 사용자 정의 클래스로 회전 효과 적용
sr.reveal('.rotate-element');

위의 코드에서 ScrollReveal을 생성하고 설정을 정의합니다. duration은 애니메이션의 지속 시간을 밀리초 단위로 설정합니다. distance는 요소의 이동 거리를 정의합니다. rotate는 X, Y, Z 축을 기준으로 회전할 각도를 설정합니다.

3. HTML 요소에 클래스 추가

회전 효과를 적용할 HTML 요소에 rotate-element 클래스를 추가합니다.

<div class="rotate-element">
  <!-- 요소 내용 -->
</div>

ScrollReveal은 rotate-element 클래스를 지닌 요소를 찾아서 회전 효과를 적용합니다.

4. 결과 확인

위의 과정을 거치고 웹 페이지를 실행하면 스크롤을 내릴 때 rotate-element 클래스를 가진 요소가 회전하면서 나타나는 것을 확인할 수 있습니다.

이제 ScrollReveal을 사용하여 스크롤 회전 효과를 구현하는 방법을 알게 되었습니다. ScrollReveal을 활용하여 다양한 애니메이션 효과를 추가할 수 있으므로 참고하여 웹 페이지를 더욱 흥미롭게 만들어보세요!

참고 자료: