[javascript] ScrollMagic을 사용하여 페이지 스크롤 이벤트 동작 여부 설정하기

27 Nov 2023

javascript

ScrollMagic은 JavaScript 라이브러리로, 페이지 스크롤 이벤트를 처리하고 다양한 애니메이션 효과를 부여할 수 있습니다. 이 라이브러리를 사용하여 페이지 스크롤 이벤트 동작 여부를 설정하는 방법에 대해 알아보겠습니다.

ScrollMagic 소개

ScrollMagic은 페이지 스크롤 이벤트를 다루기 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 페이지의 스크롤 위치에 따라 요소를 제어하거나 애니메이션 효과를 부여할 수 있습니다. ScrollMagic은 다른 JavaScript 애니메이션 라이브러리와도 호환되며, 강력한 커스터마이징 기능을 제공합니다.

ScrollMagic 사용하기

ScrollMagic 라이브러리를 다운로드하고 HTML 파일에 추가합니다.

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

ScrollMagic 객체를 생성하고 컨트롤러를 초기화합니다.

var controller = new ScrollMagic.Controller();

스크롤 이벤트를 사용할 요소와 이벤트 동작을 설정합니다.

var scene = new ScrollMagic.Scene({
  triggerElement: '#element',
  reverse: false // 이벤트를 닫혔을 때 다시 열지 여부
})
.on("enter", function () {
  // 스크롤 이벤트 발생 시 동작할 함수
})
.on("leave", function () {
  // 스크롤 이벤트 종료 시 동작할 함수
})
.addTo(controller); // 컨트롤러에 씬 추가

triggerElement: 스크롤 이벤트를 적용할 요소를 지정합니다.
reverse: 요소로 다시 돌아갔을 때 이벤트를 다시 발생시킬지 여부를 설정합니다.
enter: 요소가 스크롤 영역에 들어왔을 때 발생하는 이벤트입니다.
leave: 요소가 스크롤 영역을 벗어났을 때 발생하는 이벤트입니다.

필요에 따라 추가적인 설정을 작성합니다.

scene.addIndicators({
  name: '페이지 스크롤',
  indent: 200 // 디버깅시 요소의 위치를 보여줍니다.
});

예제

아래는 ScrollMagic을 사용하여 페이지 스크롤 이벤트 동작 여부를 설정하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ScrollMagic Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js"></script>
  <style>
    #element {
      width: 100%;
      height: 500px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div id="element"></div>

  <script>
    var controller = new ScrollMagic.Controller();
  
    var scene = new ScrollMagic.Scene({
      triggerElement: '#element',
      reverse: false
    })
    .on("enter", function () {
      console.log("스크롤 영역에 진입했습니다.");
    })
    .on("leave", function () {
      console.log("스크롤 영역을 벗어났습니다.");
    })
    .addTo(controller);

    scene.addIndicators({
      name: '페이지 스크롤',
      indent: 200
    });
  </script>
</body>
</html>

위 예제를 실행하면 #element라는 요소가 스크롤 영역에 들어갔을 때 "스크롤 영역에 진입했습니다."라는 메시지가 출력되며, 스크롤 영역을 벗어났을 때 "스크롤 영역을 벗어났습니다."라는 메시지가 출력됩니다. 해당 요소의 스크롤 영역에 진입/이탈 여부에 따라 원하는 동작을 지정할 수 있습니다.

이를 통해 ScrollMagic을 사용하여 페이지 스크롤 이벤트 동작 여부를 설정하는 방법을 알아보았습니다. ScrollMagic은 다양한 기능을 제공하므로, 필요한 기능에 맞게 커스텀하여 사용할 수 있습니다.

ScrollMagic 소개

ScrollMagic 사용하기

예제

참고 자료