[javascript] Velocity.js를 사용하여 요소를 트리거하여 애니메이션을 시작하는 방법은?

22 Dec 2023

javascript

Velocity.js는 요소들을 부드럽게 애니메이션시키는데 사용되는 빠르고 손쉬운 라이브러리입니다. Velocity.js를 사용하여 요소를 트리거하여 애니메이션을 시작하는 방법은 다음과 같습니다.

1. Velocity.js 라이브러리 추가

우선, HTML 문서에 Velocity.js 라이브러리를 추가해야 합니다. 다음과 같이 <script> 태그를 사용하여 CDN을 통해 라이브러리를 로드할 수 있습니다.

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

2. 애니메이션 트리거와 시작

아래는 Velocity.js를 사용하여 요소를 트리거하여 애니메이션을 시작하는 간단한 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Velocity.js 애니메이션 시작</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.min.js"></script>
  <style>
    /* 애니메이션 대상 스타일 */
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
    }
  </style>
</head>
<body>

<!-- 애니메이션 대상 요소 -->
<div class="box"></div>

<script>
  // 요소를 트리거하여 애니메이션 시작
  Velocity(document.querySelector('.box'), { 
    opacity: 0.5, 
    translateY: '200px' 
  }, { 
    duration: 1000 
  });
</script>

</body>
</html>

위의 예제에서는 .box 클래스를 가진 <div> 요소를 애니메이션 대상으로 지정하고, Velocity() 함수를 사용하여 애니메이션을 시작합니다.

이를 통해 Velocity.js를 사용하여 요소를 트리거하여 애니메이션을 시작할 수 있습니다.

더 자세한 내용은 Velocity.js 공식 문서를 참고하시기 바랍니다.