Personalizar el cursor en tu sitio web no es algo a lo que te debas enfrentar a diario, pero en casos específicos te verás en la necesidad de hacerlo como me ocurrió a mi en días pasados, pues me encuentro desarrollando un juego y en este caso si que es importante hacer esto.
En la búsqueda de cómo personalizar el cursor lo primero con lo que me encontré fue con los estilos de cursor que ya el navegador nos da por defecto. Una manera sencilla y clara de darle feedback a nuestros usuarios y mejorar la experiencia.
Las opciones por defecto no eran lo que buscaba, necesitaba que el cursor se convirtiera en una mira pues al hacer click iba a simular un “disparo” y así fue como llegue a solucionarlo.
La manera más simple y efectiva con un par de lineas en** JavaScript**. Creando un div el cual tiene unas propiedades de **CSS ** y un par de animaciones. Posteriormente agregando un evento que escuche cuando el cursor se encuentre en el área que queremos que el cursor cambie.
La forma en la que funciona es simple, lo que estamos haciendo es que estamos modificando la propiedad top y left del elemento con los valores Y y X del cursor. Básicamente es atar un elemento del DOM al la posición de nuestro cursor.
