Hoy vamos a tener un poco más de diversión con las transiciones de CSS3. Hay un truco popular de jQuery que expande el recorte de una imagen cuando se pasa sobre ella y quería replicarla utilizando solo CSS Para llevar las cosas más lejos, pongo este efecto en acción en una galería de miniaturas.
Sigue leyendo para ver la demostración en vivo y sigue paso a paso a medida que explicamos cómo funciona esto y construyes todo desde cero.
Lo que estamos construyendo
En caso de que seas el tipo de persona a la que le guste saltar al final de un libro y echar un vistazo a cómo resulta todo, aquí tienes una demostración completa de lo que crearemos.
Demostración en vivo: Haga clic aquí
Prueba de concepto
Antes de comenzar a diseñar una página de la galería completa, construyamos una versión pequeña solo para tener una idea de lo que queremos lograr. La idea básica es tener una galería de miniaturas donde se recorta cada miniatura para mostrar solo una parte de una imagen más grande. Luego, cuando se desplaza sobre una imagen, la miniatura se expande para mostrar todo.
HTML
Para comenzar, cree una página HTML básica y lance algunos divs como se muestra a continuación. Aquí tengo un contenedor básico y luego tres imágenes. Por lo que estamos haciendo, no podemos simplemente diseñar las imágenes directamente sin un poco de estiramiento incómodo, por lo que nos vemos obligados a poner cada una en su propia división.
Ahora, con solo este código, obtendremos los cambios básicos de diseño que deseamos. Esto es importante porque significa que cualquier navegador que no admita lo que hacemos a continuación seguirá funcionando bien en esta página, aunque sea de una manera simplificada.
Para hacer el efecto más interesante, sin embargo, vamos a lanzar una transición CSS básica. Primero, especificamos que el ancho es lo que queremos apuntar, luego implementamos una duración y cómo queremos que progrese la animación (flexibilización). Finalmente, como siempre, nos aseguramos de cubrir nuestras bases con los prefijos del navegador.
Si alguna vez no está seguro acerca de una transición de CSS3, o cualquier otra sintaxis de esa manera, visite CSS3Maker.com, que generará el código para usted desde controles simples.
Avance
¡Eso es todo al respecto! Con eso, tenemos un efecto de puertas correderas fresco similar a algo que se ve con frecuencia en jQuery. Haga clic aquí o en la imagen de abajo para ver una vista previa en vivo de lo que acabamos de construir.
Como puede ver, al pasar el mouse sobre una imagen, se expande lentamente. El diseño se adapta muy bien a medida que las otras imágenes se mueven. Es super simple pero muy divertido para jugar.
Yendo más lejos: una galería de miniaturas
Ahora que tenemos nuestro concepto básico resuelto y funcionando sin problemas, es hora de ver cómo podría diseñar una página web completa en torno a este concepto. En lugar de solo tres imágenes, nos expandiremos a una galería más grande de miniaturas. Vamos a empezar con algo de HTML.
Imágenes HTML
Lo primero que queremos hacer es presentar nuestras imágenes como lo hicimos antes. Esta vez sin embargo, tendremos dos filas de cuatro. Observe que los he separado en dos secciones distintas. Mi idea original era hacer que la galería volviera a fluir para que, al expandirse una imagen y empujar a las demás hacia adelante, saltaran automáticamente a la siguiente fila. Esto funcionó muy bien al principio, pero me di cuenta de que pasar por encima de la última imagen en una fila era problemático, ya que saltaba hacia abajo mientras estabas flotando. Funcionó, pero era simplemente demasiado incómodo. Creo que esta solución es mucho más elegante y aún más fácil de expandir.
Con este código, nuestra galería está completa. Las animaciones son fluidas y tener múltiples filas realmente hace que el efecto sea más impresionante. Si desea agregar otra fila, simplemente copie y pegue un archivo galleryRow div; no es necesario más CSS
Así es como se ve la galería ahora. Observe cómo la imagen expandida tiene exactamente el mismo ancho que las dos imágenes más pequeñas debajo de ella.
Acabado de la página: HTML
Nunca me gusta dejar un ejemplo tan simple, así que terminemos el diseño. Para hacer esto, agregamos un encabezado básico y un párrafo que explica la galería.
También lanzaré este fragmento en mi encabezado para que pueda usar? Oswald? de la biblioteca de fuentes de Google.
Terminando la página: CSS
Nuestro último paso es diseñar estas dos porciones de texto. Tenga en cuenta que estoy usando la taquigrafía para la fuente, lo que ahorra un montón de espacio en nuestro CSS. Puedes ver que declaré la fuente Oswald como lo haría con cualquier otra. Aunque las opciones aún son bastante limitadas, realmente me encanta lo simple y no restrictivo que es implementar la Biblioteca de fuentes de Google.
Producto terminado
Nuestro pequeño proyecto ya está completo. Echa un vistazo a la demostración en vivo a continuación para verlo en acción. ¿No es genial lo mucho que podemos lograr ahora sin una sola línea de JavaScript?
Demostración en vivo: Haga clic aquí
Deja un comentario a continuación y déjanos saber qué piensas de este efecto. ¡También asegúrese de mencionar cualquier idea que tenga para mejorarla!