COMO PERSONALIZAR EL CURSOR DEL RATÓN CON JAVASCRIPT

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';