Las animaciones CSS de varios pasos son fáciles con los fotogramas clave, pero ¿qué sucede si queremos usar transiciones simples y antiguas para lograr un efecto similar? Además, ¿cómo tomamos un solo evento flotante y lo convertimos en múltiples animaciones en diferentes elementos?
La respuesta está en usar hovers enterrados, un truco simple y efectivo que definitivamente debes probar.
Inspirado por eventos reales
Chris Coyier de CSS-Tricks sirve como fuente de inspiración para mis artículos con más frecuencia que cualquier otro autor. El hombre sabe mucho sobre CSS y siempre aprendo mucho de sus artículos.
Recientemente, publicó un artículo en CSS que generalmente confunde a los principiantes y en él explicó brevemente a qué se refería como "enterrados ocultos". Sinceramente, nunca antes había considerado utilizar un efecto de desplazamiento como este antes y estaba ansioso por explorar las implicaciones. El siguiente es el resultado de esa exploración.
¿Qué es un Hover enterrado?
El concepto detrás de un vuelo enterrado es bastante simple. La idea general es que normalmente cambiamos el elemento sobre el que se desplaza. Aquí hay un ejemplo:
Aquí tenemos un enlace simple que cambia de color al pasar el cursor. Sin embargo, resulta que no necesariamente tenemos que cambiar el elemento sobre el que estamos sobrevolando sino que, de hecho, podemos elegir cambiar a uno de sus descendientes. Veamos cómo se ve esto:
Aquí la declaración se ve casi igual pero tiene un efecto dramáticamente diferente. Cuando el mouse del usuario ingresa al contenedor primario, todos los enlaces dentro de ese contenedor cambian de color de inmediato.
Es importante tener en cuenta que IE6 no es compatible con elementos no vinculados. También es importante tener en cuenta que IE6 es una excusa sucia y no buena para un navegador en estos días y realmente no me preocupa mucho en lo que respecta a la enseñanza.
Simulando una animación de fotogramas clave
Ahora, al darme cuenta de que lo anterior era posible, mi cerebro se dirigió inmediatamente a la implementación más complicada de este escenario que podría encontrar.
Los casos de uso simple para este método son prácticos, pero es probable que usted pueda encontrarlos usted mismo. En su lugar quería hacer algo divertido. El resultado es bastante poco práctico y no tiene la mejor compatibilidad con el navegador, pero cumple con el objetivo de que realmente te haga pensar en aplicar creativamente hovers enterrados.
La idea básica que se me ocurrió es simular un webkit-keyframe-animation Con CSS3 basado en la transición simple, que tiene mucho mejor soporte. El resultado será una animación compleja de varios pasos que se desencadena con un evento de desplazamiento. ¿Por qué? Porque todos somos nerds aquí y será divertido construir, por eso.
Comenzando: El HTML
Apenas necesitamos HTML para este proyecto. Todo lo que hice fue crear un contenedor con un encabezado y algunos párrafos. Nuestro objetivo será activar varias animaciones cuando el usuario se desplace sobre el div.
CSS básico
Estos estilos son en su mayoría arbitrarios y se pueden cambiar a su gusto. Establecí un bonito gráfico de fondo oscuro, creé un cuadro visible y definí el estilo del texto.
En este punto, la vista previa en vivo se parece a la imagen de abajo. Como puede ver, nuestro texto está desbordando el cuadro, pero eso está completamente bien, ya que lo cambiaremos en un minuto.
Estilo del encabezado y los párrafos
Aquí está el esquema básico de nuestra animación: el encabezado se encuentra solo centrado verticalmente en el contenedor. Sobre la marcha, el encabezado desaparece y los párrafos se desvanecen de uno en uno.
Para que esto suceda, primero debemos colocar el encabezado absolutamente. Esto nos permitirá colocar el encabezado donde lo queremos sin afectar los tres párrafos debajo de él.
Observe que establecer la altura de línea igual a la altura del contenedor centra el encabezado verticalmente dentro del div.
A continuación queremos ocultar nuestros párrafos de la vista. Los estaremos desvaneciendo de lo invisible a lo visible, así que usé la propiedad de opacidad para lograr esto.
El resultado debe ser algo como el que se muestra a continuación, con solo el encabezado visible dentro del contenedor en este punto.
Definiendo las animaciones
Ahora que tenemos todo en orden, además de tener nuestros estados de visibilidad al cuadrado, es hora de terminar haciendo que las animaciones funcionen.
Comenzaremos por definir nuestra transición de encabezado utilizando los distintos prefijos del navegador. A continuación, utilizamos nuestro primer vuelo enterrado! Una vez más, la idea es que cuando el contenedor se desplaza, las animaciones comienzan. Con esto en mente, utilizamos contenedor: hover h2 para crear un evento que solo se aplica a nuestro encabezado.
Una vez que tenemos nuestro encabezado apuntado, lo disparamos y reducimos su opacidad a cero.
Animando los párrafos
Aquí viene la parte difícil.Tenemos tres párrafos diferentes y queremos atenuarlos en uno a la vez. Lo que debemos hacer es apuntar a cada uno individualmente y atenuarlos a diferentes velocidades.
Como no le dimos a ninguno de los párrafos una identificación especial o clase, usaremos nth-child para agarrar a cada uno de ellos individualmente. Ya que las animaciones no son compatibles con IE de todos modos, esto no será un problema.
Las longitudes específicas de las animaciones son un poco extrañas. Casi tuve que juguetear con la forma en que el encabezado se desvaneció y estos desaparecieron hasta que encontré algo que me gustaba. Estos números parecen funcionar bien:
Cuando el usuario se desplaza sobre el contenedor, queremos que aparezcan los párrafos, por lo tanto, el paso final es utilizar otro elemento de desplazamiento oculto para apuntar a las etiquetas de párrafo. Usamos .container: hover p para apuntar a los párrafos sobre el hover y aumentar su opacidad. Las animaciones que configuramos en el paso anterior harán que la transición sea agradable y gradual.
Algo bueno de todas estas animaciones es que se ven igual de bien cuando se saca el mouse de la división. Los párrafos se desvanecen y el encabezado vuelve a aparecer. ¡Bastante limpio!
Echar un vistazo
La demostración en vivo es un poco más complicada, pero utiliza la misma técnica que en el ejemplo anterior. Lo siento, los usuarios de Internet Explorer, como siempre, no es divertido para ti.
Demo en vivo: Haga clic aquí para lanzar.
Conclusión
Con la ayuda de elementos ocultos enterrados, podemos lograr muchas técnicas CSS realmente interesantes y únicas con las que quizás hayas tenido problemas antes. Este artículo usó un cursor oculto para activar múltiples animaciones CSS en diferentes elementos para mostrar cómo la complejidad de los efectos que puede implementar.
Deje un comentario a continuación y déjenos saber cómo y si utiliza hovers enterrados.