Cómo añadir un cursor personalizado a tu sitio web

¿Qué es un cursor personalizado?

Un cursor personalizado es un cambio intencionado en el icono predeterminado que parpadea para mostrarte dónde apunta el ratón o dónde estás listo para escribir. En lugar de una línea parpadeante aburrida, puedes añadir color, animaciones al pasar el cursor o añadir efectos de clic. En un ordenador, puedes cambiar el cursor predeterminado a través de los ajustes. Para una página web, necesitas un poco de código HTML, CSS y JavaScript. No dejes que eso te intimide.

¿Cuál es el propósito de un cursor personalizado?

Un cursor personalizado hace que tu sitio web sea único. Los cursores personalizados guían a los visitantes para que interactúen con la página web con flechas, mensajes de ayuda, guías, barras de progreso, etc. Un cursor personalizado sustituye el cursor predeterminado utilizado por el navegador de tu visitante, para hacer que la página sea más interesante y ayudar a los usuarios a comprender lo que sucederá si hacen clic en un enlace o arrastran un objeto.

Sí. Un cursor personalizado es seguro. Sin embargo, el hecho de que un cursor CSS sea seguro, no significa que tu visitante lo sepa. Es posible que demasiada creatividad haga que un usuario dude.

Por ejemplo, si utilizas demasiadas animaciones o parpadeos cuando un visitante mueve el ratón, puede hacer que piense que algo está mal. Recuerda que el propósito de un cursor personalizado es guiar y comunicarse con tu usuario. Si los análisis web muestran que los clientes cierran tu sitio web con frecuencia después de añadir una personalización, es posible que desees dar marcha atrás en algunos de los cambios.

Aunque los cursores personalizados son seguros, debes tener mucho cuidado al descargar cursores de diferentes lugares. En general, nunca es seguro descargar código o archivos de sitios web que no conozcas. Antes de descargar un cursor personalizado de un sitio web que ofrece descargas gratuitas, investiga un poco para asegurarte de que la página tenga una sólida reputación. Y aún mejor, sigue leyendo para ver cómo hacer un cursor CSS por tu cuenta, que se adapte a tus necesidades. Son solo un par de líneas de código que puedes hacer incluso si eres un completo novato.

¿Cómo personalizo el cursor en mi sitio web?

Hay dos formas principales de hacer un cursor de ratón personalizado. Puedes utilizar CSS o JavaScript. Antes de añadir CSS o JavaScript, deberás navegar hasta el script CSS que deseas modificar. Si estás utilizando el creador de páginas web de Mailchimp, vete al panel Add and Edit Web Page Sections (Añadir y editar secciones de páginas web) en el creador de páginas web de Mailchimp.

No te sientas intimidado. Es un cambio sencillo. Aquí tienes toda la información:

1. Ve al panel de control de tu sitio web y haz clic en Edit Site (Editar sitio).
2. Pasa el ratón por la página con la que deseas trabajar y haz clic en Edit Page (Editar página).
3. En el creador de sitios de Mailchimp, haz clic en el panel Sections (Secciones). El panel se expandirá para mostrarte las secciones en tu página web.
4. Pasa el ratón sobre cualquier sección del panel para ver esa área de la página.
5. Haz clic en la sección donde deseas personalizar el cursor para ver las opciones de estilo.
6. Haz clic en edit (editar) para abrir la sección y realizar los cambios en el código CSS.

Cómo crear un cursor personalizado utilizando CSS

CSS tiene una propiedad para personalizar los cursores. Puedes utilizar la propiedad del cursor en la sección del cuerpo de CSS para hacer que el puntero del ratón sea más interesante. Necesitarás una imagen en formato PNG, JPEG o SVG. A continuación, utiliza el siguiente fragmento de código en el CSS de la sección que desees personalizar para cambiar el puntero a un gráfico de tu elección:

body { cursor: url(‘YourCursorImage.png'), auto; }

La propiedad del cursor te permite especificar cuál de los muchos cursores aparecerá. El “automático” predeterminado debe aparecer el último en la lista. Esto permite que el navegador del usuario muestre su cursor predeterminado si no funciona nada más.

A continuación, se incluye una tabla de algunas de tus opciones que están disponibles con CSS. Utiliza la sintaxis:

cursor: value, auto;

Por ejemplo, si deseas hacer que el cursor del ratón sea un círculo azul que muestre al usuario que debe esperar, utiliza la siguiente declaración. La adición de “automático” al final de la declaración proporciona al navegador una opción alternativa por si no sabe cómo interpretar ese valor en particular.

cursor: progress, auto;

Estos son solo algunos de los cientos de valores que puedes utilizar con la propiedad del cursor de CSS. Para obtener una lista más completa, consulta la página de desarrolladores de Mozilla.

Personalizar el color también es una buena manera de hacer que tu cursor de CSS sea interesante, especialmente si haces que los colores coincidan con tus directrices de diseño de marca. Puedes cambiar el color o el tamaño en el script CSS. Ten precaución de no hacer que el puntero del ratón sea demasiado grande o difícil de ver contra el fondo de tu página web.

Cómo crear un cursor personalizado utilizando JavaScript

Debes cambiar el DOM para personalizar el cursor en JavaScript. El primer paso es crear una división en el código HTML:

<div class="cursor pointed"></div>

Una vez que hayas establecido la sección div, puede utilizar las instrucciones de JavaScript para hacer que tu cursor personalizado haga lo que desees con un acontecimiento de movimiento del ratón. (Eso es solo una forma sofisticada de referirse a cuando el usuario mueve el ratón o hace clic en algún lugar de tu página web.) Necesitarás CSS para ocultar el cursor predeterminado y para establecer las coordenadas X e Y. Aquí tienes un ejemplo de la sintaxis que necesitarás.

body{ background-color: #1E1C44; cursor: none; }

.pointed{ width: 12px; height: 12px; background-color: red; border-radius: 25%; }

window.addEventListener('mousemove', moveCursor)

Nota: Utiliza el valor “none” (ninguno) para la propiedad del cursor para ocultar el cursor predeterminado y mostrar el tuyo en su lugar. El oyente de acontecimientos responderá cada vez que un visitante de tu sitio web mueva el cursor del ratón.

Cursor personalizado de Chrome

Chrome es el navegador web más popular, así que comencemos con los complementos de cursor personalizados de Chrome. Hay cerca de cien opciones gratuitas, que incluyen Minecraft, espadas láser y dibujos animados.

Si lo deseas, incluso puedes utilizar tu propia imagen como cursor, siempre que cumplas con las directrices de tamaño. Para unos resultados óptimos, utiliza un gráfico de 16 por 16 o 32 por 32 píxeles. Es posible utilizar una imagen de hasta 128 por 128, pero primero prueba los tamaños más pequeños. Para una visualización óptima, Chrome recomienda una imagen con un fondo claro. (Si el fondo no es claro, entonces cubrirá parte de tu sitio web). La extensión está disponible de forma gratuita en la Chrome Web Store de Google. Después de instalar la extensión, deberás actualizar tu página web.

Hay algunas limitaciones importantes respecto al cursor personalizado de Chrome. En primer lugar, no funcionará en la mayoría de las páginas de la tienda. En segundo lugar, está limitado a la navegación en Chrome. Por lo tanto, la extensión de Chrome no resulta ideal para los diseñadores de webs, pero es una forma rápida y sucia de ver qué aspecto tienen los diferentes punteros del ratón en tu sitio web.

¿Qué navegadores admiten cursores CSS y cursores de ratón personalizados?

Todos los navegadores modernos saben cómo admitir un cursor CSS personalizado. Si un usuario está utilizando un navegador antiguo, el “auto” al final de la sintaxis le permitirá ver el cursor predeterminado para ese navegador.

Navegadores compatibles con la propiedad del cursor CSS:

• Apple Safari 1.2 y posteriores
• Firefox - todas las versiones
• Google Chrome - todas las versiones
• Internet Explorer 4.0 y posteriores
• Opera 7 y posteriores

Cómo hacer que un sitio web destaque con un cursor personalizado. Personalizar el cursor es solo una de las muchas maneras en que puedes hacer que tu página web sea más interactiva e interesante. Al hacer que tu sitio web sea fácil e intuitivo, atraerás y mantendrás a los visitantes. ¡No temas experimentar y dejar que tu creatividad brille!