EFECTO DEL MOUSE (Chispas Brillantes)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Efecto de Destellos</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(90deg, #1a1a1d, #4e4e50);
font-family: Arial, sans-serif;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="sparkleCanvas"></canvas>
<script>
const canvas = document.getElementById("sparkleCanvas");
const ctx = canvas.getContext("2d");
let particles = [];
const maxParticles = 50;
// Configura el tamaño del canvas
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Variables para fondo dinámico
let gradientStep = 0;
// Clase para partículas
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = Math.random() * 5 + 1;
this.speedX = Math.random() * 4 - 2;
this.speedY = Math.random() * 4 - 2;
this.alpha = 1; // Opacidad
}
update() {
this.x += this.speedX;
this.y += this.speedY;
this.alpha -= 0.02; // Desvanecimiento gradual
}
draw() {
ctx.globalAlpha = this.alpha;
ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
// Función para manejar partículas
function handleParticles() {
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
// Elimina partículas que se desvanecen
if (particles[i].alpha <= 0) {
particles.splice(i, 1);
i--;
}
}
}
// Evento del mouse
window.addEventListener("mousemove", (e) => {
for (let i = 0; i < 5; i++) {
particles.push(new Particle(e.clientX, e.clientY));
if (particles.length > maxParticles) {
particles.shift();
}
}
});
// Ajusta el tamaño del canvas al redimensionar la ventana
window.addEventListener("resize", () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// Fondo dinámico
function drawBackground() {
gradientStep += 0.01;
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, `hsl(${gradientStep % 360}, 70%, 50%)`);
gradient.addColorStop(1, `hsl(${(gradientStep + 120) % 360}, 70%, 50%)`);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// Animación principal
function animate() {
drawBackground(); // Dibuja el fondo
handleParticles(); // Maneja las partículas
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
No hay comentarios.:
Publicar un comentario