[javascript] ScrollMagic을 사용하여 스크롤에 따라 요소가 페이드 인/아웃되는 애니메이션 효과 만들기

27 Nov 2023

javascript

소개

ScrollMagic은 jQuery 플러그인으로, 스크롤 이벤트를 감지하여 웹 페이지의 특정 요소에 다양한 애니메이션 효과를 적용할 수 있게 해줍니다. 이번 포스트에서는 ScrollMagic을 사용하여 스크롤에 따라 요소가 페이드 인/아웃되는 애니메이션 효과를 만들어 보겠습니다.

시작하기 전에

이번 예제에서는 jQuery와 ScrollMagic 라이브러리를 사용합니다. 따라서 해당 라이브러리를 먼저 프로젝트에 추가하는 작업이 필요합니다. 아래의 CDN 링크를 사용하여 간단히 라이브러리를 추가할 수 있습니다.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

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

HTML 구조 준비하기

우선 ScrollMagic을 통해 페이드 인/아웃 효과를 적용할 요소를 HTML 구조에 추가해야 합니다. 예를 들어, 다음과 같은 구조를 사용할 수 있습니다.

<div class="fade-in-out">
  <div class="box">
    <h1>요소가 페이드 인/아웃 됩니다.</h1>
    <p>스크롤에 따라 효과가 변화합니다.</p>
  </div>
</div>

CSS 스타일 설정하기

HTML 구조에 추가한 요소에 대한 CSS 스타일을 설정해야 합니다. 이번 예제에서는 페이드 인/아웃 효과를 위해 투명도(opacity)를 사용하므로, 다음과 같은 스타일을 추가합니다.

.fade-in-out {
  height: 1000px;   /* 스크롤 범위 설정 */
}

.box {
  opacity: 0;      /* 초기에는 투명 상태로 설정 */
  transition: 1s;  /* 트랜지션 효과를 적용할 시간 설정 */
}

.box.fade-in {
  opacity: 1;     /* 스크롤 시 페이드 인 효과를 위한 투명도 설정 */
}

ScrollMagic을 이용한 애니메이션 효과

이제 ScrollMagic을 사용하여 스크롤에 따라 요소의 페이드 인/아웃 효과를 적용해 보겠습니다. 아래의 JavaScript 코드를 HTML 파일에 추가합니다.

// ScrollMagic 컨트롤러 생성
var controller = new ScrollMagic.Controller();

// Scene 생성
new ScrollMagic.Scene({
  triggerElement: '.fade-in-out',  /* 효과를 적용할 트리거 요소 선택 */
  triggerHook: 0.5                 /* 트리거 위치 선택 (스크롤 위치에 따라 조절) */
})
.setClassToggle('.box', 'fade-in') /* 페이드 인/아웃 효과를 적용할 요소 선택 */
.addTo(controller);

결과 확인하기

이제 웹 페이지를 브라우저에서 열어 스크롤을 이동시켜보면, 요소가 스크롤에 따라 페이드 인/아웃 되는 효과를 확인할 수 있습니다.

결론

ScrollMagic을 사용하여 스크롤에 따라 요소가 페이드 인/아웃되는 애니메이션 효과를 만드는 방법에 대해 알아보았습니다. ScrollMagic은 다양한 웹 애니메이션 효과를 쉽게 적용할 수 있도록 도와주는 강력한 라이브러리입니다. 참고 자료를 통해 더 많은 기능과 사용법을 확인해 보시기 바랍니다.