[javascript] ScrollMagic을 사용하여 스크롤에 따라 페이지 요소의 크기 변경하기

27 Nov 2023

javascript

많은 웹 페이지에서 스크롤에 따라 요소의 크기를 동적으로 변경하는 기능을 구현하는 것이 중요합니다. 이를 위해 ScrollMagic 라이브러리를 사용할 수 있습니다. ScrollMagic은 스크롤 이벤트를 감지하고 요소에 특정 액션을 적용할 수 있는 강력한 도구입니다. 이 글에서는 ScrollMagic을 사용하여 스크롤에 따라 페이지 요소의 크기를 변경하는 방법을 소개하겠습니다.

ScrollMagic 설치하기

먼저, ScrollMagic을 사용하기 위해 해당 라이브러리를 설치해야 합니다. HTML 파일 내에서 다음의 CDN 링크를 추가하여 ScrollMagic을 로드하세요:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>

요소 크기 변경하기

ScrollMagic을 사용하여 요소의 크기를 변경하려면 다음의 단계를 따르세요:

HTML에서 data-scroll 속성으로 스크롤에 반응할 요소를 지정하세요. 예를 들어, <div> 요소를 선택하고 data-scroll 속성을 추가합니다:
```
<div class="my-element" data-scroll></div>
```
JavaScript 내에서 ScrollMagic 컨트롤러를 초기화하세요. ScrollMagic 컨트롤러는 스크롤 이벤트를 감지합니다:
```
var controller = new ScrollMagic.Controller();
```

액션을 생성하여 요소의 크기를 변경합니다. 예를 들어, 요소가 스크롤 될 때마다 높이가 변하도록 액션을 만들어보겠습니다:

var scene = new ScrollMagic.Scene({
    triggerElement: ".my-element",  // 요소
    triggerHook: 0.5,  // 트리거 지점 위치
    duration: "100%"  // 스크롤 이벤트가 발생하는 범위
})
.setClassToggle(".my-element", "active")  // 요소에 클래스 추가 및 제거
.addTo(controller);  // 컨트롤러에 추가

위의 코드에서 triggerElement는 요소를 선택하며, triggerHook은 요소의 트리거 지점을 조정합니다. duration은 스크롤 이벤트가 발생하는 범위를 지정합니다. 위의 예에서는 요소가 활성화되면 active 클래스가 추가된 후 요소의 높이가 변화합니다.

스크롤 하면 변경된 요소를 확인하세요. 스크롤 이벤트에 따라 요소의 크기가 동적으로 변경됩니다.

마치며

ScrollMagic은 스크롤에 따라 페이지 요소의 크기를 동적으로 변경하는 기능을 간단하게 구현할 수 있는 강력한 도구입니다. 위의 단계를 따라 프로젝트에 ScrollMagic을 적용해보세요. 더욱 자세한 내용은 ScrollMagic의 공식 문서를 참조하시기 바랍니다.

참고 자료: