El efecto de CSS al mover el mouse de Adam Argyll trucos CSS - Aprender Marketing
CSS

El efecto de CSS al mover el mouse de Adam Argyll trucos CSS

Pasé un tiempo mirando mi feed de CodePen en busca de algo agradable a la vista y no tuve que pasar por la primera página antes de que nos diéramos cuenta. efecto de retención de cursor CSS puro desde Adán Argyle.

Debo haber pasado 10 minutos viendo la demostración con asombro. Hay algo en esto que se parece mucho a una aplicación. Creo que puede ser lo contextualmente preciso que es, ya que el color de fondo se desliza hacia adentro hacia la izquierda y luego se apaga. Este es exactamente el comportamiento que esperaría de la interacción del mouse hacia adentro y hacia afuera.

En cualquier caso, lancé un nuevo bolígrafo y me dispuse a recrearlo. Y no es súper complicado ni nada por el estilo, sino más bien un uso inteligente de transiciones y transformaciones combinadas con los cambios correctos. ¡Muy elegante! De hecho, estoy un poco avergonzado de que me tomó mucho tiempo descubrir cómo funciona la parte de salida del mouse.

Aquí le mostramos cómo lidiar con eso, las verrugas y todo lo demás.

«Apuesto a que usa una transición a un background«

Este fue mi primer pensamiento Definir el color de fondo, establecer background-size y background-position, luego transferir background-position. Así es como he visto ese color de fondo «creciente» en el pasado. Yo mismo lo he hecho en algunos proyectos, como este:

Si pudiera hacer lo mismo, solo de izquierda a derecha, entonces todo lo que queda es sacar el mouse, ¿no? No. El problema es que no hay nada que realmente pueda hacer. background-position Transición de izquierda a derecha a izquierda a derecha. Puedo lograr que haga una cosa o la otra, pero no ambas.

«Tal vez sea un transform en lugar de.»

Mi siguiente intento fue saltar a las transformaciones. transform propiedad proporciona un montón de características que pueden transition juntos para un movimiento un poco más complejo. Por ejemplo, background puede «crecer» o «reducirse» cambiando el elemento scale()O, en este caso, solo en el eje x scaleX().

Pero como mencioné, no hay manera de aislar los elementos background para hacer esto scaleX(0) a scaleX(1) escamas entero elemento, por lo que básicamente aplasta la conexión – el contenido y todo – a nada, luego lo vuelve a estirar a su tamaño natural, que es un efecto completamente diferente. Además, significa empezar con scaleX(0) que por defecto oculta toda la diablura que lo hace inutilizable.

¡Pero un pseudo-elemento podría funcionar! No importa si está aplastado u oculto porque no es parte del contenido real. Tienes que poner background en su lugar, colóquelo directamente debajo del enlace.

a {
  /* Keeps the pseudo-element contained to the element */
  position: relative;
}

a::before {
  background: #ff9800;
  content: "";
  inset: 0; /* Logical equivalent to physical offsets */
  position: absolute;
  transform: scaleX(0); /* Hide by default */
  z-index: -1; /* Ensures the link is stacked on top */
}

«Lo necesito ahora ::before para cambiar al mantener presionado el mouse «.

sabía que podía hacerlo ::before escala de 0 a 1 conectándolo al elemento de enlace :hover condición.

a:hover::before {
  transform: scaleX(1)
}

¡OK! estaba en algo

espolvorear un poco transition polvo de hadas en él y las cosas comienzan a cobrar vida.

a::before {
  background: #ff9800;
  content: "";
  inset: 0;
  position: absolute;
  transform: scaleX(0);
  transition: transform .5s ease-in-out;
  z-index: -1;
}

«Um, la transición está comenzando ambos direcciones. «

Aquí nuevamente, de alguna manera me quedé atascado. Algo en mi cabeza simplemente no se rompió por alguna razón. Como de costumbre, me encontré con el almanaque de CSS-Tricks para ver qué propiedad podría haberme eludido.

Oh, sí, eso sería todo transform-originEsto me permite preguntar dónde está. transform comienza, que no es completamente diferente de la background-position como intenté antes transform puede comenzar a la izquierda en lugar del valor predeterminado 50% 50% posición.

a::before {
  background: #ff9800;
  content: "";
  inset: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease-in-out;
  z-index: -1;
}

Si, entonces:

yo ya estaba pasando ::before a scaleX(1) al sujetar el ratón. si volviera transform-origin desde left a right al mismo tiempo, entonces mayuuub el foco sale al contrario de como aparecía cuando salía el ratón?

a:hover::before {
  transform: scaleX(1);
  transform-origin: right;
}

🤞

¡Uy, atrás! vamos a comerciar left y right valores. 🙃

Maravilloso. ¡Gracias, Adán, por la inspiración!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba