[javascript] Velocity.js를 사용하여 요소를 진동시키는 방법은?
우선 Velocity.js를 HTML 문서에 추가합니다. 아래는 CDN을 통해 추가하는 예시입니다.
<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0.6/velocity.min.js"></script>
그런 다음, 다음과 같은 코드를 사용하여 요소를 진동시킬 수 있습니다.
// 요소 선택
var element = document.getElementById('myElement');
// 진동 애니메이션 적용
Velocity(element, { translateY: '10px' }, { loop: true, easing: 'spring' });
위 코드에서, myElement
는 진동시킬 요소의 ID입니다. translateY
프로퍼티를 사용하여 요소를 위아래로 이동시키는 것으로, 원하는 진동 방향을 선택할 수 있습니다. loop
옵션을 true
로 설정하면 애니메이션이 무한 반복됩니다. easing
옵션을 사용하여 진동의 부드러움을 조절할 수 있습니다.
이렇게 하면 Velocity.js를 사용하여 요소를 진동시킬 수 있습니다.