La popularidad de los cursores únicos está en auge. Este tutorial te ayudará a crear tus propios cursores increíbles en Webflow, usando interacciones integradas y una sola línea de código personalizado.
Usar las herramientas nativas de Webflow te da una flexibilidad enorme en el diseño de tu sitio: ¡tu imaginación es el límite!
En este tutorial, te mostraré cómo:
- Diseñar tu propio elemento de cursor
- Usar IX2 para que el cursor siga los movimientos del ratón o panel táctil
- Asegurarte de que los elementos no interfieran entre sí
- Usar IX para crear estados de hover para nuestro cursor personalizado
Echa un vistazo a mi proyecto clonable de cursor personalizado para ver un adelanto de lo que vamos a hacer.
Empecemos, ¿te parece?
Preparando el terreno y creando nuestros elementos
Crea un div contenedor para el cursor (cursor-wrapper) con los siguientes parámetros:
- Display: flex
- Align: center
- Justify: center
- Position: fixed
- Alineación completa
- Z-index: 100 (debe ser el número más alto de tu sitio)
Este div contendrá nuestro cursor, que siempre estará por encima de todo. Centramos los elementos hijos del cursor para crear la interacción que sigue al puntero.
Ahora crearemos el objeto del cursor propiamente dicho. Como vamos a hacer un cursor un poco más complejo, el objeto constará de dos elementos: un punto interior y un círculo exterior.
El punto interior es un div con estos parámetros:
- Ancho y alto: 10px
- Un color brillante: usé #f07
- Border-radius: 50% para que quede perfectamente redondo
El círculo exterior es un div con estos parámetros:
- Ancho y alto: 40px
- Posición: absoluta (no lo alinees de ninguna forma o perderás el centrado)
- Border-radius: 50%
- Bordes: una línea sólida de 2px con el color #f07 (podemos hacerla transparente para que no estorbe demasiado)
¡Listo! ¡Tu fantástico cursor ya está listo para entrar en acción!
Crear una interacción
Ahora vamos a crear una interacción que servirá como disparador para toda la página. Más adelante entenderás por qué usamos este método en lugar de una interacción sobre un elemento.
Usaremos dos interacciones de movimiento del ratón para que ambos elementos sigan al cursor. Para que esto funcione, debemos añadir manualmente estas dos interacciones a cada página de nuestro sitio web. Puede parecer un poco pesado, pero probablemente no añadirás un elemento de diseño tan divertido a un sitio corporativo serio, así que esperamos que sea rápido.
La primera interacción que crearemos afectará a nuestro elemento de punto:
- Crear una interacción
- Añade una transformación de movimiento a las acciones del eje x
- Configura su posición al 0% para mover el elemento -50vw en el eje x
- Configura su posición al 100% para moverlo 50vw en el eje x (esto asegurará el movimiento correcto de izquierda a derecha en la ventana)
Repite estos pasos para las acciones del eje y, pero:
- Configura el movimiento para la posición del 0% en el eje y a -50vh
- Ajusta la posición del 100% del eje Y a 50vh (esto hará que nuestro punto siga verticalmente a nuestro dispositivo señalador)
Nota: configura tu interacción para que afecte a la clase en lugar del elemento, así podrás reutilizarla en otras páginas sin problemas.
Vale, ya tenemos los ajustes internos listos. Ahora sal de la configuración de la interacción y ajusta la suavidad general al 0%. Esto garantiza que nuestro punto sea ágil y no se quede atrás respecto al movimiento del ratón o panel táctil.
Esta segunda interacción afectará a nuestro círculo. Sal a la pantalla inicial del panel de interacciones y elige el disparador de movimiento del ratón en el viewport.
Ahora puedes duplicar fácilmente nuestra primera interacción: haz clic en los puntos suspensivos y elige duplicar.
Entra en esta nueva interacción duplicada. Haz clic en la acción superior, mantén presionada la tecla Shift y haz clic en la acción inferior.
Selecciona todo en el panel de configuración, haz clic derecho y elige cambiar objetivo. Ahora haz clic en el elemento del círculo para que todo en la configuración afecte al círculo en lugar del punto. Las reglas de seguimiento para el punto son las mismas para el círculo, así que todo lo demás puede quedarse como está.
¡No olvides configurar de nuevo tu interacción para que afecte a la clase en lugar del elemento!
Para que nuestro cursor se mueva con un efecto elástico agradable, aumentaremos el ajuste de suavidad de la interacción a un 70% aproximadamente.
¡Listo! Sal de la pestaña de interacciones y sigamos.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Hacer desaparecer nuestro cursor predeterminado
Ahora tenemos un objeto en movimiento que sigue a nuestro cursor, ¡pero queremos que este objeto sea nuestro cursor, no solo que lo siga!
Para lograrlo:
- Selecciona la clase body en el navegador
- Elige el campo de selector en la pestaña de estilos
- Elige Body (All Pages) en el menú desplegable
Ahora desplázate hasta el final del panel de estilos, haz clic en cursor y elige none de la lista.
¡Magia! Tu elemento de cursor recién creado es ahora tu cursor principal.
Asegurarse de que los elementos del cursor no interfieran con objetos interactivos
Dado que nuestros elementos del cursor están dentro del contenedor fijo, ocupan toda la pantalla y están por encima de todo lo demás en la página con el z-index más alto, debemos hacer algunos ajustes que nos permitan pasar el ratón y hacer clic sobre el resto de los elementos de la página.
Esto es posible gracias a la magia de una línea de CSS personalizado.
Crea un elemento de inserción HTML en cualquier parte de la página e introduce el siguiente código:
<style>
.cursor-wrapper {pointer-events: none;}
</style>
¡Listo! Esto añade una propiedad especial a nuestro contenedor del cursor que le indica que ignore las actividades del puntero, como pasar el ratón por encima o hacer clic. Por eso creamos nuestras interacciones de movimiento del ratón para toda la página y no solo para este contenedor: ahora no se registrará al pasar el ratón.
Importante: copia este elemento de inserción HTML en todas las páginas del sitio que utilicen este cursor.
Añadir estados de hover para enlaces
Acabamos de crear un cursor bonito pero no interactivo que no cambiará sin importar sobre qué pasemos el ratón. Al pasar el ratón sobre los enlaces, aparecerá el cursor de dedo predeterminado. ¡Qué aburrido! Vamos a darle un poco de chispa.
- Crea y selecciona un nuevo enlace
- En el menú desplegable, elige Todos los enlaces
- Desplázate hasta el final y elige "none" en la lista de cursores. Esto evitará que aparezca el cursor predeterminado al pasar el ratón sobre los enlaces.
Ahora añadiremos una interacción que afectará a nuestro cursor cuando pasemos el ratón sobre un enlace. Para que funcione, debemos asignar una clase a los enlaces que tendrán este efecto. Vamos a darle a nuestros enlaces la clase link-hover-ix.
Con ese elemento seleccionado, ve al panel de interacciones y crea una nueva interacción de "mouse hover".
Ahora debemos definir qué sucede al pasar el ratón sobre cualquier objeto con la clase link-hover-ix, y qué sucede al quitarlo.
Por ejemplo, hagamos que nuestro punto se expanda al pasar el ratón:
- Establece el tamaño en 40px
- Reduce la opacidad al 50%.
Y hagamos que nuestro círculo desaparezca:
- Establece la opacidad al 0%
- Establece la duración en algo como 0.2s
- Añade una transición suave
Al salir el cursor, hagamos que nuestro punto se encoja:
- Ajusta el tamaño a 10px
- Restaura la opacidad al 100%
Nota: seleccionar elementos para usarlos en las interacciones será un poco menos cómodo, ya que no podrás hacer clic directamente en el lienzo. Este es el inconveniente de añadir eventos de no puntero al contenedor del elemento.
Para seleccionar elementos, tendrás que:
- Hacer clic en la pestaña del Navegador
- Seleccionar el elemento de la lista
- Volver a las interacciones y configurar este elemento
Esta nueva interacción debe configurarse para afectar a la clase en lugar de al elemento, así podremos reutilizar fácilmente esta clase para añadir una interacción a cualquier enlace en el futuro.
Nuestro último paso es simplemente seleccionar cualquier enlace y añadirle la clase link-hover-ix. Ten cuidado de no aplicar ningún estilo a esta clase única; ahora es nuestra clase de utilidad para añadir interacciones.
Cómo evitar que el cursor personalizado aparezca en dispositivos móviles
Tenemos que actualizar la guía para asegurarnos de que el cursor se desactive en dispositivos móviles; a nadie le gusta tener un elemento extraño flotando y siguiendo sus toques.
Desactiva el cursor en dispositivos con pantallas pequeñas (y en ventanas del navegador redimensionadas, ¡qué bajón!):
- Cambia el diseñador a la vista de "tableta"
- Selecciona nuestro cursor-wrapper y establece la visualización (display) en none en el panel de estilos.
Restaura el comportamiento para pantallas más pequeñas:
- Selecciona la clase body en el navegador
- Desde la pestaña de estilo, haz clic en el campo del selector y elige Body (All Pages) en el menú desplegable
- Desplázate hasta el final del panel de estilos, haz clic en cursor y selecciona default en la lista
- Selecciona un enlace sin ninguna clase (el enlace limpio es necesario porque, de lo contrario, el diseñador de Webflow no nos permitirá profundizar en el árbol de selectores en ningún otro punto de interrupción que no sea el de escritorio)
- En el menú desplegable de selectores, selecciona All Links
- Desplázate hasta el final del panel de estilos y selecciona pointer para el cursor
Necesitaremos usar código personalizado para desactivar nuestro cursor en el iPad Pro. El iPad Pro tiene una resolución realmente alta; aunque creas que estás diseñando para escritorio, el sitio se verá y se comportará como tal en estos dispositivos. Podrías ignorar a los usuarios de iPad Pro, pero si quieres crear una experiencia fantástica para todos, este código es la solución.
Puedes pegar el siguiente código personalizado en:
- Un elemento embed, o
- La sección head code de la pestaña custom code en la configuración de tu proyecto
¡No olvides envolver el código entre etiquetas <style> </style> si eliges la segunda opción!
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
body {
cursor: default;
}
.cursor-wrapper {
display: none;
}
a {
cursor: pointer;
}
}
@media only screen
and (min-device-width: 1366px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
body {
cursor: default;
}
.cursor-wrapper {
display: none;
}
a {
cursor: pointer;
}
}
¡Y eso es todo! Ahora tenemos un cursor genial que sigue nuestros movimientos con fluidez, reacciona al pasar el ratón y nos permite seleccionar texto. ¡Lo logramos!
Uso moderado de elementos de interfaz divertidos
Espero que esta técnica te resulte divertida y fácil de aplicar. ¡Pero no te pases!
Como todo buen diseñador sabe, debemos tener cuidado de no confundir ni abrumar a los usuarios con elementos de interfaz extraños que alteren demasiado su entorno de trabajo. Este cursor animado es un toque sutil y agradable para una página promocional, pero no lo recomendaría para la interfaz de una aplicación web de uso diario.
