Colin's Blog
[javascript] ScrollMagic을 사용하여 스크롤에 따라 요소가 회전하는 각도를 제어하기

소개

ScrollMagic은 스크롤 이벤트를 트리거로 사용자 지정 애니메이션을 제어할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 스크롤에 따라 요소의 특정 속성, 예를 들어 회전 각도를 제어할 수 있습니다. ScrollMagic은 직관적이고 강력한 API를 제공하므로 다양한 스크롤 애니메이션을 구현할 수 있습니다.

시작하기 전에

이 튜토리얼에서는 ScrollMagic 라이브러리를 사용하여 스크롤에 따라 요소가 회전하는 각도를 제어하는 방법을 알아보겠습니다. 이를 구현하기 위해서는 다음과 같은 전제 조건을 충족해야 합니다.

구현 방법

다음은 ScrollMagic을 사용하여 스크롤에 따라 요소가 회전하는 각도를 제어하는 간단한 예제입니다. 이 예제에서는 회전 각도가 스크롤 위치에 따라 선형적으로 변화하는 효과를 구현합니다.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ScrollMagic Example</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div class="container">
      <div class="box">
        Scroll to see the rotation effect
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <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/animation.gsap.min.js"></script>

    <script src="main.js"></script>
  </body>
</html>

CSS

.container {
  height: 2000px;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  color: #ffffff;
  font-size: 24px;
  text-align: center;
  line-height: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript

$(document).ready(function() {
  var controller = new ScrollMagic.Controller();

  var scene = new ScrollMagic.Scene({
      triggerElement: ".container",
      duration: "200%"
    })
    .setTween(".box", { rotation: "360", ease: Linear.easeNone })
    .addTo(controller);
});

위의 코드를 간략히 설명하자면 다음과 같습니다.

  1. HTML에서 회전 효과를 적용할 요소를 정의합니다. 이 예제에서는 .box 클래스를 가진 div 요소를 사용합니다.
  2. CSS를 사용하여 .container 클래스의 높이를 2000px로 설정하고 .box 클래스의 스타일을 정의합니다.
  3. JavaScript에서 ScrollMagic과 animation.gsap 라이브러리를 로드합니다.
  4. $(document).ready() 함수 내에서 ScrollMagic.Controller 객체를 생성합니다.
  5. ScrollMagic.Scene 객체를 생성하고 triggerElement와 duration 속성을 설정하여 트리거 요소와 애니메이션 지속 시간을 지정합니다.
  6. setTween 메서드를 사용하여 .box 요소의 회전을 설정하고 ease 속성을 사용하여 애니메이션을 선형으로 하도록 설정합니다.
  7. addTo 메서드를 사용하여 controller에 해당 scene을 추가합니다.

위의 예제는 스크롤을 하면 .box 요소가 360도 회전하는 효과를 보여줍니다.

결론

ScrollMagic을 사용하면 스크롤에 따라 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다. 이 튜토리얼에서는 스크롤에 따라 요소가 회전하는 각도를 제어하는 방법을 살펴보았습니다. 여기에서 사용한 예제는 시작점으로 사용할 수 있으며, ScrollMagic의 다양한 기능을 적용하여 보다 다채로운 애니메이션을 만들어볼 수 있습니다.

© 2018 Colin. All rights reserved.