[javascript] 웹 애니메이션(CSS 애니메이션, GreenSock 등)

07 Dec 2023

javascript

요즘 웹 사이트에서는 동적이고 생동감 있는 요소들이 많이 사용되고 있습니다. 이러한 요소들을 구현하기 위해 웹 애니메이션 기술이 많이 활용됩니다. 여기서는 CSS 애니메이션과 GreenSock을 사용한 웹 애니메이션에 대해 알아보겠습니다.

CSS 애니메이션

CSS 애니메이션은 웹 요소를 이용하여 애니메이션 효과를 부여하는 방법입니다. CSS transition과 CSS animation 두 가지 방법으로 구현할 수 있습니다.

CSS Transition

CSS Transition은 요소의 상태 변화에 따라 서서히 애니메이션 효과를 부여하는 방법입니다. 예를 들어, 마우스를 올릴 때 배경색이 서서히 변하는 효과를 주고 싶을 때 사용할 수 있습니다.

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 1s;
}

.box:hover {
  background-color: red;
}

위의 예제에서는 .box 클래스에 마우스를 올릴 때 background-color 속성의 값이 서서히 변하도록 설정되어 있습니다.

CSS Animation

CSS Animation은 특정한 시간 동안 요소에 애니메이션 효과를 주는 방법입니다. 예를 들어, 페이드 인/아웃 효과를 주고 싶을 때 사용할 수 있습니다.

@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: fadeInOut 3s infinite;
}

위의 예제에서는 @keyframes를 사용하여 fadeInOut이라는 애니메이션을 정의하고, .box 클래스에 해당 애니메이션을 적용하도록 설정되어 있습니다.

GreenSock

GreenSock은 JavaScript 기반의 애니메이션 라이브러리로써, 다양한 애니메이션 효과를 간편하게 구현할 수 있습니다. CSS 애니메이션보다 더 다양한 기능과 성능을 제공합니다.

GreenSock을 사용하기 위해서는 라이브러리를 웹 페이지에 추가하고, JavaScript 코드에서 애니메이션을 정의하고 제어해야합니다. 아래는 GreenSock을 사용하여 요소의 위치를 애니메이션하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="box"></div>

  <script>
    gsap.to(".box", { x: 200, duration: 2 });
  </script>
</body>
</html>

위의 예제에서는 gsap.to 메서드를 사용하여 .box 클래스를 2초 동안 x축 방향으로 200px 이동시키는 애니메이션을 정의하고 실행합니다.

결론

CSS 애니메이션과 GreenSock은 웹 애니메이션을 구현하기 위해 널리 사용되는 기술입니다. CSS 애니메이션은 간단한 효과를 적용할 때 유용하며, GreenSock은 더 다양한 효과와 성능을 제공합니다. 상황에 맞게 적절한 기술을 선택하여 웹 사이트에 생동감을 더해보세요.