스크롤 애니메이션은 웹 페이지에 인터랙티브한 요소를 추가하여 사용자들에게 더 좋은 경험을 제공하는데 도움이 됩니다. ScrollMagic은 이러한 스크롤 애니메이션을 만들기 위한 강력한 JavaScript 라이브러리 중 하나입니다. 이번 블로그 포스트에서는 ScrollMagic을 사용하여 스크롤에 따라 요소의 스타일을 변경하는 방법에 대해 알아보겠습니다.
스크롤 애니메이션을 위한 ScrollMagic 설정
먼저, ScrollMagic을 사용하기 위해 HTML 문서에 해당 라이브러리를 추가해야 합니다. 아래의 스크립트 태그를 <head> 태그 안에 추가해주세요.
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
그리고 애니메이션을 위해 TweenMax 또는 GSAP 라이브러리도 필요합니다. 아래의 스크립트 태그를 <head> 태그 안에 추가해주세요.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
요소의 스타일 변경을 위한 ScrollMagic 컨트롤러 생성하기
ScrollMagic을 사용하기 위해 컨트롤러를 생성해야 합니다. 아래의 JavaScript 코드를 HTML 문서에 추가해주세요. 코드는 <body> 태그 닫는 태그 직전에 위치하도록 해주세요.
var controller = new ScrollMagic.Controller();
요소의 스타일 변경을 위한 ScrollMagic 애니메이션 생성하기
이제 스크롤에 따라 요소의 스타일을 변경하기 위한 ScrollMagic 애니메이션을 생성해보겠습니다. 아래의 JavaScript 코드를 HTML 문서에 추가해주세요.
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger", // 애니메이션 시작을 위한 트리거 요소
duration: 300, // 애니메이션이 진행될 스크롤 거리
triggerHook: 0.5 // 트리거 요소가 스크롤 영역 중앙에 위치할 때 애니메이션 실행
})
.setClassToggle("#element", "new-style") // 요소의 스타일 변경을 위해 클래스 토글
.addTo(controller); // 컨트롤러에 애니메이션 추가
위의 코드에서 #trigger와 #element는 각각 애니메이션의 트리거 요소와 대상 요소를 선택하는 선택자입니다. new-style은 요소에 적용할 클래스 이름입니다. 스크롤이 트리거 요소에 도달하면 해당 요소의 클래스가 토글되어 스타일이 변경됩니다.
마무리
이제 ScrollMagic을 사용하여 스크롤에 따라 요소의 스타일을 변경하는 방법에 대해 알아보았습니다. ScrollMagic을 사용하면 웹 페이지에 동적인 애니메이션을 추가할 수 있어 사용자에게 더욱 흥미로운 경험을 제공할 수 있습니다. 더 많은 ScrollMagic 기능과 옵션을 확인해보시고 창의적인 스크롤 애니메이션을 만들어보세요!