javascript
  1 min. de lectura (aproximado)

Como personalizar el cursor del ratón con JavaScript

(1 min. de lectura) Para darle un toque único y profesional a una página web reemplazando el cursor clásico por uno personalizado es un detalle que marca la diferencia. Personalizar el cursor del ratón con Javascript es bastante sencillo:

 // Crear el cursor dinámicamente
const cursor = document.createElement('div');

// Estilos aplicados con JavaScript
cursor.style.position = 'fixed';
cursor.style.width = '40px';
cursor.style.height = '40px';
cursor.style.backgroundImage = "url('imagen_url')"; // ← Cambia esta URL
cursor.style.backgroundSize = 'contain';
cursor.style.backgroundRepeat = 'no-repeat';
cursor.style.pointerEvents = 'none';
cursor.style.transform = 'translate(-50%, -50%)';
cursor.style.zIndex = '9999';
cursor.style.transition = 'transform 0.1s ease';
cursor.style.userSelect = 'none';

document.body.appendChild(cursor);

// Mover el cursor con el mouse
document.addEventListener('mousemove', (e) => {
 cursor.style.left = e.clientX + 'px';
 cursor.style.top = e.clientY + 'px';
});

// Efecto al hacer clic (opcional)
document.addEventListener('mousedown', () => {
 cursor.style.transform = 'translate(-50%, -50%) scale(0.7)';
});

document.addEventListener('mouseup', () => {
 cursor.style.transform = 'translate(-50%, -50%) scale(1)';
});

// Ocultar el cursor original del sistema
document.body.style.cursor = 'none';