Guía / Artículo

Cursor personalizado de Drams

Dram
30 de octubre de 2020
Cursor personalizado de Drams

Viendo como esta es una pregunta recurrente en los foros y basado en la popularidad general de los únicos cursores en diseño en los últimos años decidí aprovechar la moda para escribir esta humilde guía para principiantes para crear tus propios y hermosos cursores completamente en Webflow, con interacciones incorporadas y sólo una línea de código de estilo personalizado.

Hay 1 algunos 1 temas donde @vincent, @sabannay @antonisalamina explicar cómo usar los cursores personalizados insertando sus imágenes en el código, por lo que hablaré sólo de la implementación pura de Webflow.

El uso de las herramientas nativas de Webflow le permitirá una gran flexibilidad en lo que puede hacer, y su imaginación va a ser el único factor limitante.

Para resumir, vamos a..:

  • Estilo nuestro propio elemento de cursor
  • usar ix2 para que siga los movimientos del ratón/touchpad
  • asegúrese de que el elemento no interfiera con otros elementos interactivos de la página
  • crear estados de vuelo para nuestro cursor personalizado usando ix

Aquí está el proyecto 15 para que cualquiera pueda echar un vistazo, clonar y hacer lo que quiera con él.

Así que esa es la esencia de esto. De todos modos, empecemos, ¿sí?

Vamos a crear este cursor omnipresente sólo porque todo el mundo lo ha visto en alguna parte y es un buen comienzo para una mayor experimentación.

01%20AM

Preparar la escena y crear nuestros elementos

  1. Crear una división de envoltura del cursor con los siguientes parámetros: display: flex, alinear: centro, justificar: centro, posición: fijo, y alineación completa, índice z: 100 (este tiene que ser el número más alto en su sitio). Este div contendrá nuestro cursor siempre en la parte superior. Centramos a sus hijos para poder crear nuestra interacción para seguir el dispositivo de puntero.
  2. Crear un objeto cursor real. Como vamos a crear un cursor ligeramente complejo, el objeto consistirá en dos elementos - punto interior y círculo exterior.
  3. Inner dot es un buceador con los parámetros de ancho y alto que son 10px, algún color brillante como #f07 (o lo que quieras por supuesto, ¡es tu cursor después de todo!), radio del borde: 50% para la redondez perfecta.
  4. El círculo exterior es una div con los siguientes parámetros: ancho y alto: 40px, posición: absoluta (no lo alinees de ninguna manera o el centrado estará desactivado), radio del borde: 50%, pon los bordes en línea sólida de 2px con el color de #f07 (podemos hacerlo transparente para que no se interponga demasiado).

OK, el hermoso cursor está listo para ser usado!

Interacción

  1. Crearemos una interacción que se activará para toda la página. La necesidad de utilizar este método en lugar de la interacción sobre el elemento será clara más adelante.
37%20AM
  1. Tendremos que usar dos interacciones de movimiento de ratón para hacer que nuestros dos elementos se muevan después del cursor 'real'. Esto es algo inconveniente en el sentido de que tendremos que añadir manualmente estas dos interacciones en cada página de nuestro sitio web, pero no espero que añada una interfaz tan lúdica a unas 100 páginas de un gran sitio corporativo, sino que la utilice con moderación en proyectos más pequeños de tipo promocional, por lo que no debería ser tan complicado.
  • La primera interacción que crearemos afectará a nuestro elemento punto. Crear una interacción, añadir la transformación de movimiento a las acciones x, establecer su posición 0% para mover el elemento por el eje x -50vw, establecer su posición 100% para mover 50vw por el eje x. Esto asegurará el movimiento correcto de izquierda a derecha en la ventana. Repita estos pasos para las acciones y pero establezca el movimiento para el eje y posición 0% a -50vhand posición 100% a 50vh - esto hará que nuestro punto se mueva correctamente después de nuestro dispositivo señalador en posición vertical.
  • Lo importante que hay que tener en cuenta aquí es que necesita configurar su interacción para que afecte a la clase en lugar de al elemento para que pueda ser reutilizado sin problemas en otras páginas.
17%20PM
  • OK, la configuración interna en su lugar, ahora sale de la configuración de la interacción y establece su configuración de suavizado general a 0% ya que nuestro punto debería ser idealmente muy sensible y no ir a la zaga del movimiento real del ratón o del panel táctil.
03%20AM
  • La segunda interacción afectará a nuestro círculo. Salga a la primera pantalla del panel ix y vuelva a elegir el movimiento del ratón en el disparador de la ventana.
37%20AM
  • Ahora puede simplemente duplicar nuestra primera interacción. Haga clic en elipses y elija "duplicar".
15%20AM
  • Introduzca esta nueva interacción duplicada. Haga clic en la acción superior, luego mantenga presionada la tecla de mayúsculas y haga clic en la acción inferior. Seleccionará todo en el panel de configuración, ahora haga clic con el botón derecho del ratón y seleccione cambiar el objetivo, luego haga clic en el elemento del círculo para que todo en la configuración ahora lo afecte en lugar de nuestro punto. No necesitamos modificar nada más, las siguientes reglas son las mismas para el círculo. No olvide hacer la interacción para afectar la clase en lugar de los elementos otra vez!
17%20PM
  • Esta vez, para que nuestro cursor se comporte de forma agradablemente elástica, aumentaremos la suavidad de la configuración de ix hasta algo así como un 70%. ¡Hecho! Salga de la pestaña de interacciones y continuemos.

Haciendo desaparecer nuestro cursor por defecto.

Ahora tenemos un bonito objeto en movimiento que sigue a nuestro cursor, pero queríamos que fuera nuestro cursor y no sólo que lo siguiera.

  1. Seleccione su clase de cuerpo en el navegador, vaya a la pestaña "estilo", haga clic en el campo "selector" y seleccione el elemento desplegable "Cuerpo (todas las páginas)".
49%20AM
  1. Ahora desplácese hasta la parte inferior del panel de estilos y seleccione la opción "cursor". Seleccione "none" de la lista. Ya ha terminado, su elemento de cursor recién creado es ahora su cursor principal!
38%20AM

Asegurarse de que los elementos del cursor no interfieren con los objetos interactivos de la página

Dado que nuestros elementos del cursor se encuentran dentro del wrapper que es fijo, llena toda la pantalla, y está por encima de todo lo demás en la página con el índice z más alto, ¡tenemos que hacer algo para poder pasar el cursor y hacer clic a través de él para llegar al resto de los elementos de la página! Y esto es realmente posible con sólo una línea de css personalizado.

  1. Cree un elemento de incrustación html en algún lugar de la página y ponga el siguiente código dentro:



.cursor-wrapper {pointer-events: none;}


  1. Eso es todo, hemos añadido una propiedad especial a nuestra envoltura del cursor que le dice que no reaccione a ninguna actividad del puntero como los hovers y los clics (esta es la razón por la que tuvimos que crear nuestras interacciones de movimiento del ratón para toda la página en lugar de para esta envoltura, ya que no nos registrará más al pasar el puntero sobre ella). No olvide copiar este elemento de incrustación html en cada página del sitio con este cursor.

Añadir estados de vuelo para los enlaces

Ahora tenemos un bonito pero no interactivo cursor que no cambiará sin importar sobre qué lo coloquemos. Los enlaces simplemente producirán el cursor de dedo por defecto cuando pasemos el cursor por encima de ellos. Eso es aburrido.

  1. Crear y seleccionar un nuevo enlace. En el menú desplegable del selector, seleccione "Todos los enlaces".
28%20AM
  1. Al igual que con nuestro cuerpo, navegue hasta el fondo, elija "ninguno" de la lista de cursores. Esto evitará que el cursor por defecto aparezca en los enlaces que se encuentren en el aire.
  2. Ahora añadiremos una interacción que afectará a nuestro cursor cuando pasemos por encima de un enlace. Para que esto funcione, necesitamos dar todos los enlaces que tengan esta clase. Démosle a nuestro enlace una clase de link-hover-ix.
  3. Una vez seleccionado el elemento, vaya al panel de interacciones y cree una nueva interacción con el "ratón". Ahora definirá lo que ocurre cuando se pasa el cursor sobre cualquier objeto con la clase link-hover-ix y lo que ocurre cuando se pasa el cursor fuera de ella. Por ejemplo, podemos hacer que nuestro dotexpandir en el aire en tamaño a 40px y reducir su opacidad al 50%, mientras que nuestro círculo simplemente se desvanecerá con la opacidad establecida en 0%. Establezca la duración a algo así como 0.2s y añada facilidad. Al desplazarnos podemos hacer que nuestro punto reduzca su tamaño a 10px y que se restaure la opacidad al 100%, mientras que nuestro círculo también recuperará su opacidad al 100%.
  4. Debe tener en cuenta que la selección de elementos para su uso en las interacciones será un poco menos conveniente ya que no puede hacer clic ahora directamente en el lienzo - el inconveniente de que añadimos los eventos de no puntero a la envoltura del elemento. Tendrá que hacer clic en la pestaña del navegador, seleccionar el elemento de la lista y volver a las interacciones y luego configurar este elemento.
  5. Esta interacción recién creada debería ser establecida para afectar a la clase en lugar de al elemento, de modo que podamos reutilizar fácilmente esta clase para añadir interacción a cualquier enlace en el futuro.
  6. Ahora simplemente seleccione cualquier enlace y añada la clase link-hover-ix. Sólo asegúrese de tener cuidado y no estilizar esta clase única con ningún efecto - ahora es nuestra clase de utilidad sólo para añadir interacción.

Deshabilitar el cursor personalizado para que no aparezca en los dispositivos móviles

Actualizando la guía aquí para asegurarnos de que apagamos el cursor cuando lo vemos en los dispositivos móviles - nadie quiere que ese elemento extraño quede flotando y siguiendo nuestros grifos (¡o tal vez alguien encuentre un uso para tal comportamiento!).

  1. Cambie su diseñador a la vista de "tableta", seleccione nuestra envoltura de cursor y configure la pantalla: ninguna en el panel de estilos. OK, no más cursor personalizado en dispositivos de pantalla pequeña (y no más cursor personalizado en ventanas de navegador redimensionadas también pero oh bien).
  2. Ahora, una vez más, seleccione su clase de cuerpo en el navegador, vaya a la pestaña "estilo", haga clic en el campo "selector" y seleccione el menú desplegable "Cuerpo (todas las páginas)". Ahora desplácese hasta la parte inferior del panel de estilos y seleccione la opción "cursor". Seleccione "por defecto" de la lista.
  3. A continuación, seleccione algún enlace sin clases (el enlace claro es necesario porque, de lo contrario, el diseñador de flujos web no nos permitirá profundizar en el árbol de selección en ningún otro punto de interrupción que no sea el del escritorio). En el menú desplegable del selector, seleccione "Todos los enlaces". Ahora desplácese de nuevo a la parte inferior del panel de estilos y seleccione "puntero" para el cursor.
13%20PM
  1. Ahora se ha restaurado el comportamiento por defecto de las pantallas más pequeñas!
  2. Arreglar el iPad Pro. El iPad Pro es raro ya que tiene una resolución realmente grande, de modo que aunque pienses que estás haciendo tu diseño para computadoras de escritorio, y las tabletas deben verse diferentes, el sitio seguirá viéndose y comportándose como un escritorio en los profesionales. Puedes simplemente ignorar tu base de usuarios de iPad Pro, que probablemente sea muy pequeña de todas formas, o usar este código personalizado para apuntar exactamente a este único dispositivo y desactivar nuestro cursor personalizado en él (ponlo en nuestra incrustación o en los ajustes del sitio Encabezar código personalizado. No olvide envolverse <style></style>si está haciendo esto último):

@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;
}
}

Bueno, básicamente hemos terminado. Tenemos el puntero del cursor de la cadera que sigue suavemente nuestro movimiento, reacciona a los cierres y nos permite seleccionar el texto y hacer lo que queramos con el resto del sitio.

Espero que lo encuentres fácil de seguir y que le des un buen uso a esta técnica. ¡Pero por favor no exageres! Como cualquier buen diseñador sabe, por supuesto, que no debemos confundir a nuestros usuarios con elementos de interfaz extraños que cambian significativamente su entorno de trabajo. Creo que crear este efecto para tu llamativa y poco común página promocional está bien, pero ponerlo en la interfaz de usuario de una aplicación web que debería ser usada diariamente es un no no.

¡Que tengas un buen día!

Dram
30 de octubre de 2020

Recibe los recursos de la web directamente en tu buzón.

Inscríbete para recibir información semanal e inspiración en tu bandeja de entrada.

OTRAS GUÍAS Y LECCIONES

Impulsa más tu sitio web de flujo de datos.