[javascript] Velocity.js를 사용하여 특정 요소에만 애니메이션 효과를 적용하는 방법은?

22 Dec 2023

javascript

먼저, 애니메이션을 적용할 HTML 요소에 고유한 ID나 클래스를 추가합니다. 예를 들어, 다음과 같이 HTML에 요소를 정의할 수 있습니다.

<div id="targetElement">애니메이션을 적용할 요소</div>

그런 다음, Velocity.js를 사용하여 해당 요소에 애니메이션을 추가할 수 있습니다. 예를 들어, 요소가 클릭될 때 배경색을 변경하고 이동하는 애니메이션을 추가하려면 다음과 같이 할 수 있습니다.

// Velocity.js를 사용하여 애니메이션 효과 적용
$('#targetElement').click(function() {
  $(this).velocity({
    backgroundColor: "#ff0000",
    left: "50px"
  }, "slow");
});

이것은 요소를 클릭할 때 해당 요소에만 애니메이션을 적용하는 간단한 예제입니다. 이 방법으로 다양한 유형의 애니메이션을 특정 요소에 적용할 수 있습니다.

참고문헌:

https://velocityjs.org/#feature-rich