[javascript] ScrollMagic을 사용하여 스크롤에 따라 요소가 나타나는 애니메이션 효과 만들기

[javascript] ScrollMagic을 사용하여 스크롤에 따라 요소가 나타나는 애니메이션 효과 만들기

27 Nov 2023

javascript

개요

ScrollMagic은 JavaScript 라이브러리로, 스크롤 이벤트에 반응하여 요소들에 애니메이션 효과를 부여할 수 있습니다. 이를 활용하여 스크롤에 따라 요소들이 부드럽게 나타나는 효과를 만들 수 있습니다.

설치

ScrollMagic을 사용하기 위해서는 먼저 ScrollMagic 라이브러리를 설치해야 합니다. 아래와 같이 스크립트 태그를 사용하여 ScrollMagic을 불러올 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>

애니메이션 효과 만들기

ScrollMagic 컨트롤러 객체 생성하기

var controller = new ScrollMagic.Controller();

요소와 애니메이션 정의하기

var scene = new ScrollMagic.Scene({
  triggerElement: '.animate-element', // 애니메이션을 적용할 요소의 클래스명
  triggerHook: 0.8 // 스크롤 위치 기준으로 요소가 언제 나타날지 설정
})
.setClassToggle('.animate-element', 'visible') // 요소에 특정 클래스를 추가/제거하여 애니메이션 효과 부여
.addTo(controller); // 컨트롤러에 장면 추가

triggerElement: 애니메이션을 적용할 요소의 선택자
triggerHook: 스크롤 위치 기준으로 요소가 언제 나타날지 설정할 값. 0에서 1 사이의 값으로 0이면 화면 상단, 1이면 화면 하단에서 나타납니다.
setClassToggle: 요소에 특정 클래스를 추가/제거하여 애니메이션 효과를 부여하도록 설정합니다.

CSS 스타일 적용하기

.animate-element {
  opacity: 0; // 초기에 요소를 숨김
  transition: opacity 0.5s; // 투명도 변경에 대한 애니메이션 설정
}

.animate-element.visible {
  opacity: 1; // scroll 위치에 따라 요소가 나타날 때 투명도 변경
}

페이지에서 스크롤 시 애니메이션 확인하기

위의 코드를 적용한 후 스크롤하여 페이지에서 애니메이션을 확인할 수 있습니다.

참고 자료