[javascript] ScrollMagic을 사용하여 페이지 스크롤을 가로로 설정하기

27 Nov 2023

javascript

ScrollMagic은 JavaScript 플러그인으로, 스크롤 이벤트를 사용하여 다양한 애니메이션 및 인터랙티브 요소를 생성할 수 있습니다. 이번 블로그 포스트에서는 ScrollMagic을 사용하여 페이지 스크롤을 가로로 설정하는 방법에 대해 알아보겠습니다.

준비하기

먼저, ScrollMagic을 사용하기 위해 알맞은 CDN 링크를 HTML 파일에 추가해야 합니다. 아래의 코드를 <head> 섹션에 추가해주세요.

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

가로 스크롤 설정하기

효과를 적용할 요소에 대한 CSS 스타일을 준비합니다. 가로 스크롤을 위해 overflow-x: scroll 속성을 설정하세요.

.horizontal-scroll {
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap; /* 요소들이 한 줄에 배치되도록 설정 */
}

ScrollMagic 컨트롤러를 생성합니다.

var controller = new ScrollMagic.Controller();

ScrollMagic을 사용하여 가로 스크롤 효과를 추가합니다. 스크롤 위치에 따라 요소를 움직이거나 활성화시킬 수 있습니다.

var scene = new ScrollMagic.Scene({
  triggerElement: '.horizontal-scroll',
  triggerHook: 'onEnter', // 스크롤 위치를 기준으로 트리거할 때
  duration: '100%', // 트리거에서 요소가 활성화되는 지점까지의 거리
})
.setPin('.horizontal-scroll') // 요소 고정
.addTo(controller); // 컨트롤러에 추가

위의 코드에서 '.horizontal-scroll'은 가로 스크롤 효과를 적용할 요소의 CSS 클래스를 나타냅니다. setPin() 함수를 사용하여 효과가 적용되는 동안 요소를 고정합니다.

추가 설정 및 실습

위의 코드를 적용하면 가로 스크롤 효과가 적용된 요소를 확인할 수 있습니다. 추가적으로 스크롤 속도, 효과 시작 및 끝 지점 등을 설정할 수 있습니다. ScrollMagic의 다양한 기능을 활용하여 웹 페이지에 독특하고 멋진 효과를 추가해보세요.

더 자세한 내용은 ScrollMagic 공식 문서를 참고할 수 있습니다.

참고 자료

이상으로 ScrollMagic을 사용하여 페이지 스크롤을 가로로 설정하는 방법에 대해 알아보았습니다. 새로운 웹 페이지 프로젝트에서 이 기능을 활용하여 사용자 경험을 향상시켜보세요!