¿Te has preguntado cómo se crean esos efectos visuales dinámicos que ves en algunas páginas web? Uno de los más populares es el efecto de «puntos que siguen al ratón», una forma simple pero efectiva de añadir interactividad y una estética única a tu sitio.
Efecto de unos puntos alrededor del puntero del ratón
En este post, te mostraré cómo crear este efecto desde cero usando las tecnologías web actuales: HTML, CSS y JavaScript. Nos olvidaremos de los códigos obsoletos y nos centraremos en un método moderno, limpio y eficiente.
¿Cómo funciona el efecto?
La idea es simple:
- HTML: Creamos varios elementos
divque servirán como los puntos. - CSS: Les damos estilo (forma, tamaño, color) y nos aseguramos de que no bloqueen los clics en la página.
- JavaScript: Usamos un bucle de animación para que cada punto siga al que tiene delante, creando una «cola» o rastro de movimiento.
El resultado es un efecto de rastro suave y fluido que parece estar vivo.
El código completo
Aquí tienes el código listo para usar. Puedes copiar y pegar cada parte en sus archivos correspondientes.
1. Archivo index.html
Crea este archivo para la estructura de la página y el estilo básico.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Efecto de puntos moderno</title>
<style>
body {
background-color: #121212;
overflow: hidden;
height: 100vh;
margin: 0;
cursor: none; /* Oculta el cursor nativo */
}
.dot {
position: absolute;
width: 15px;
height: 15px;
background-color: #61dafb;
border-radius: 50%;
pointer-events: none;
transition: transform 0.1s ease-out, opacity 0.5s ease;
opacity: 0.8;
will-change: transform;
}
</style>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
2. Archivo script.js
Este es el corazón del proyecto. Crea este archivo y añade la lógica de movimiento.
JavaScript
// Número de puntos que quieres mostrar
const numDots = 25;
// Almacena los elementos HTML y sus posiciones
const dots = [];
const dotPositions = [];
// Crea y configura los puntos
for (let i = 0; i < numDots; i++) {
const dot = document.createElement('div');
dot.classList.add('dot');
document.body.appendChild(dot);
dots.push(dot);
dotPositions.push({ x: 0, y: 0 });
}
let mouseX = 0;
let mouseY = 0;
// Escucha el movimiento del ratón
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
// Bucle de animación
function animate() {
// El primer punto sigue al ratón
dotPositions[0].x = mouseX;
dotPositions[0].y = mouseY;
// Los demás puntos siguen al anterior, con un pequeño retraso
for (let i = 1; i < numDots; i++) {
dotPositions[i].x += (dotPositions[i - 1].x - dotPositions[i].x) * 0.1;
dotPositions[i].y += (dotPositions[i - 1].y - dotPositions[i].y) * 0.1;
}
// Aplica las posiciones a los elementos HTML
dots.forEach((dot, index) => {
dot.style.transform = `translate(${dotPositions[index].x}px, ${dotPositions[index].y}px)`;
});
// Sincroniza con el navegador para una animación fluida
requestAnimationFrame(animate);
}
// Inicia el efecto
animate();
¿Cómo lo personalizas?
numDots: Aumenta o disminuye este valor para cambiar la cantidad de puntos.- CSS
.dot: Modifica las propiedadeswidth,heightobackground-colorpara cambiar la apariencia de los puntos. - Velocidad de seguimiento: En el bucle
animate, cambia el valor0.1a un número más pequeño para un movimiento más lento o a uno más grande para un movimiento más rápido.
¡Intenta añadir este efecto a tu próximo proyecto web y dale un toque único! ¿Qué otra cosa te gustaría aprender a crear con JavaScript?