[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 공식 문서를 참조하시기 바랍니다.