[javascript] Velocity.js를 사용하여 요소에 파티클 효과를 추가하는 방법은?
먼저 Velocity.js를 HTML 페이지에 추가합니다. 이후 다음과 같이 파티클 효과를 만들고 요소에 적용할 수 있습니다.
// Velocity.js를 사용하여 파티클 효과 만들기
// 이 예제에서는 div 요소에 파티클 효과를 추가합니다.
// 파티클 효과를 만들기 위한 함수
function createParticle(x, y) {
var particle = document.createElement('div');
particle.className = 'particle';
document.body.appendChild(particle);
// 파티클 애니메이션 적용
Velocity(particle, {
top: y + 'px',
left: x + 'px',
opacity: 0
}, {
duration: 1000,
complete: function() {
// 애니메이션이 끝나면 파티클 요소 제거
document.body.removeChild(particle);
}
});
}
// 요소에 마우스 이벤트 리스너 추가
document.addEventListener('mousemove', function(e) {
// 마우스 커서 위치에 파티클 효과 생성
createParticle(e.pageX, e.pageY);
});
이 예제는 마우스 커서의 위치에 파티클을 생성하여 효과를 추가하는 방법을 보여줍니다. Velocity.js를 사용하면 간단한 요소 애니메이션을 쉽게 다룰 수 있습니다.
더 많은 파라미터 및 옵션에 대한 정보는 Velocity.js 공식 문서를 참조하시기 바랍니다.