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

339 azerty

Abrir en el editor Publica tu código

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

Recomendado

24 July 2024

Plantilla de sitio web de aplicaciones

8 September 2024

Pantalla de carga de puntos animados

9 July 2025

Tarjeta de precios con efecto de inclinación 3D y anillo de energía

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

Plantilla de sitio web de aplicaciones

Pantalla de carga de puntos animados

Tarjeta de precios con efecto de inclinación 3D y anillo de energía

HTML

CSS

JS

Recomendado

Plantilla de sitio web de aplicaciones

Pantalla de carga de puntos animados

Tarjeta de precios con efecto de inclinación 3D y anillo de energía

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS