Animación de partículas de lienzo con interacción del ratón

Abrir en el editor Video Publica tu código

Recomendado

31 May 2025

Fragmento HTML de animación de texto 3D

HTML

<!DOCTYPE html>
<html>
<body style="margin:0; overflow:hidden; background:#000;">
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particles = [];

class Particle {
    constructor(x, y) {
        this.x = x; this.y = y;
        this.size = Math.random() * 5 + 1;
        this.speedX = Math.random() * 3 - 1.5;
        this.speedY = Math.random() * 3 - 1.5;
        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    }
    update() {
        this.x += this.speedX; this.y += this.speedY;
        if (this.size > 0.2) this.size -= 0.1;
    }
    draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill();
    }
}

function handle() {
    for (let i = 0; i < particles.length; i++) {
        particles[i].update(); particles[i].draw();
        if (particles[i].size <= 0.2) { particles.splice(i, 1); i--; }
    }
}

window.addEventListener('mousemove', (e) => {
    for (let i = 0; i < 5; i++) particles.push(new Particle(e.x, e.y));
});

function animate() {
    ctx.fillStyle = 'rgba(0,0,0,0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height);
    handle(); requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>

Animación de partículas de lienzo con interacción del ratón

Recomendado

Un código de Mete

Tecnología de rescisión

Fragmento HTML de animación de texto 3D

HTML

CSS

JS

Recomendado

Un código de Mete

Tecnología de rescisión

Fragmento HTML de animación de texto 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS