Las galerías de miniaturas son una fuente constante de fascinación para mí. Es mucho más divertido que simplemente crear una cuadrícula de cuadrados y llamarlo un día. Especialmente desde que CSS3 nos brinda tantas nuevas herramientas poderosas para trabajar.
Hoy vamos a mezclar la aburrida galería de imágenes estándar convirtiéndola en una serie de círculos animados. En el camino, aprenderemos un montón de conocimientos útiles sobre CSS que lo ayudarán en todo tipo de proyectos futuros.
Vistazo
Si usted es el tipo de persona al que le gusta saltar hasta el final para ver a dónde va, vea la demostración en vivo del producto terminado a continuación. Incluí tres versiones diferentes de la animación para darte algunas ideas sobre cómo variar el efecto.
Manifestación: Haga clic aquí para lanzar.
El concepto
Antes de comenzar a construir la galería de miniaturas, hablemos un poco sobre lo que estamos tratando de lograr. El objetivo aquí es tener una cuadrícula de imágenes circulares que animen en el hover. Cuando el mouse ingresa al círculo, la imagen de fondo debe cambiar y una leyenda previamente oculta debe deslizarse en la vista. Suena bastante simple ¿verdad? Sin embargo, hay una gran bola curva.
Cuando estaba planeando cómo lograr esta hazaña, me encontré con un pequeño obstáculo. La forma más fácil y sencilla de implementar el efecto de imagen deslizante es usar imágenes de fondo CSS. Ir por esta ruta tiene muchos beneficios prácticos para nosotros.
Imagen de fondo Pros
- La imagen se colocará automáticamente detrás del texto.
- Es fácil recortar la imagen a su padre
- Animar la imagen es fácil, solo cambia la posición del fondo
Como puede ver, hay un fuerte argumento para tomar esta ruta. El mayor beneficio es probablemente el primero. Si ponemos todo nuestro contenido en HTML, entonces el texto realmente empujará la imagen en lugar de flotar sobre la parte superior de la misma, por lo que tendremos que realizar algo de vudú CSS.
Si solo estuviera trabajando con una sola imagen, esta sería definitivamente la ruta que tomaría. Sin embargo, dado que estamos trabajando con una galería de imágenes, de alguna manera parece incorrecto sacar las imágenes del HTML. Realmente son el foco del contenido de la página, así que siento que deberían estar con el contenido. Puede que esté sobre pensándolo, pero creo que las imágenes de la galería de miniaturas deben insertarse a través de HTML cuando sea posible. En cualquier caso, seguir esta ruta sin duda hace que la tarea sea más desafiante, lo cual es excelente para fines educativos. Veamos algunas complicaciones a las que nos enfrentaremos usando este método.
Contras de imagen HTML
- Es un poco más difícil hacer que la imagen se recorte en un círculo
- Mover la imagen no será tan sencillo
- Nuestro orden de apilamiento será todo jodido
- Usar posicionamiento relativo con esquinas redondeadas es un desastre
Como puede ver, tenemos nuestro trabajo por delante. Afortunadamente, no es tan difícil como parece y con un poco de ingenio, tendremos nuestra galería en funcionamiento en muy poco tiempo. ¡Empecemos!
El HTML
El marcado para esta galería será muy breve. Todo lo que realmente necesitamos es una lista desordenada. Dentro de cada elemento de la lista, coloque un fragmento de texto seguido de una imagen (opcionalmente, puede vincular la imagen a algún lugar, lo dejé por simplicidad).
Tenga en cuenta que el ancho del contenedor no es arbitrario. Permitirá cuatro imágenes de 200px por pieza con 50px de margen en cada una (250 * 4 = 1,000).
Progreso de la actualización
En este punto, su fondo debe estar oscuro y los puntos de viñeta en los elementos de su lista deben desaparecer. De lo contrario, en gran parte se verá igual que la última vez. Haga clic aquí para lanzar el Dabblet en vivo.
Line 'Em Up, Round' Em Off
A continuación tenemos que apuntar a los elementos de la lista. Asegúrate de usar un selector más específico que? Li? ya que sin duda nunca querrás que todos los elementos de tu lista tengan este estilo. ¿La galeria? Class proporciona un gancho conveniente para hacer que estos estilos sean específicos para cualquier galería que configures.
A pesar del hecho de que nuestras imágenes son de 400px cuadrados, en realidad queremos que los círculos de la página sean de 200px cuadrados. Para lograr esto, simplemente configure 200px como la altura y el ancho de los elementos de la lista. Para redondear los elementos de la lista, establezca el radio de borde en 50%. No verá que esto surta efecto hasta que aplique el? Desbordamiento: ¿oculto? mando. También asegúrese de hacerlos flotar a la izquierda para que aparezcan en línea recta.
Es importante tener en cuenta el hecho de que estamos haciendo todo esto en el elemento de la lista, no en las imágenes. Esto significa que las imágenes aún conservarán su tamaño original más grande, simplemente se recortarán al tamaño del elemento de la lista, lo que les permitirá deslizarse más tarde.
Progreso de la actualización
Después de esto, tu galería debería estar tomando forma. Debe tener cuatro imágenes circulares por fila con el contenedor principal centrado. ¡Lo extraño es que nuestros círculos son planos en la parte superior! Esto es simplemente porque nuestras imágenes deben ser colocadas en su lugar, lo cual trataremos a continuación. Haga clic aquí para lanzar el Dabblet en vivo.
Scoot and Set La Animación
Como vimos en el último paso, nuestras imágenes están realmente demasiado abajo.Podemos solucionar este problema seleccionando las imágenes dentro de los elementos de la lista de nuestra galería y aplicando un margen negativo en la parte superior.
Mientras estamos aquí, también vamos a seguir adelante y configurar la animación. Acabamos de enterarnos de que podemos mover la imagen utilizando márgenes, por lo que esta es la propiedad que buscaremos en la transición.
Progreso de la actualización
La única diferencia visual que notará esta vez es que la parte superior plana de los círculos se ha corregido. Haga clic aquí para lanzar el Dabblet en vivo.
Estilo de los párrafos
Probablemente haya notado que hasta este punto, nuestros párrafos se han ocultado completamente. Esto se debe a que están apilados encima de las imágenes y fuera de los límites del elemento de la lista recortada. Arreglar esto no es tan fácil como podrías pensar.
El primer pensamiento que me vino a la mente fue simplemente usar el viejo truco de posicionamiento absoluto / relativo. Esto implica establecer la posición de los elementos de párrafo en absoluta y el elemento de la lista en relativo. Esto nos permitiría deslizar el párrafo en su lugar en relación con el punto de inicio del elemento de la lista. Desafortunadamente, hay un error en la forma en que la mayoría de los navegadores representan el radio de borde que se ilustra en la siguiente imagen.
Como puede ver, el segundo paso es aplicar la posición relativa a nuestro elemento principal, perderá sus esquinas redondeadas. Esto es definitivamente una molestia, pero no es el fin del mundo. En su lugar, solo usaremos la posición relativa en nuestro párrafo y lo moveremos en su lugar con la parte superior e izquierda.
Esto traerá nuestro párrafo a la vista y nos permitirá aplicar algunos estilos de texto básicos. También configuraremos la animación para el texto, pero en lugar de usar un margen como antes, usaremos la propiedad superior.
Tenga en cuenta que puse el? Top? Propiedad al 75% en este paso. Esto es simplemente para encontrar un punto dulce para el punto de reposo final de los párrafos. En realidad, queremos que se oculten, así que establezca el valor máximo en 110%.
Progreso de la actualización
Después de este paso, los fragmentos de texto ahora deberían estar visibles cerca de la parte inferior de sus círculos. Haga clic aquí para lanzar el Dabblet en vivo.
Establezca sus estilos de Hover
Ahora, con todo configurado y posicionado como lo necesitamos, todo lo que tenemos que hacer es mover todo cuando el usuario se desplaza sobre los elementos de la lista. Para hacer esto, usaremos un buen truco donde nos dirigimos a los elementos de la lista al pasar el mouse, pero luego elegiremos un elemento secundario de ese elemento para cambiar. Para comenzar, nos dirigimos a los elementos de la lista al pasar, luego más indica que las imágenes son lo que estamos cambiando. Luego repetimos este truco con los párrafos.
Para las imágenes, aplique un cambio vertical y horizontal en el margen y para el párrafo, lleve el valor superior al 75% que decidimos antes.
Progreso de la actualización
¡Con eso, nuestra demostración finalmente está funcionando como queremos! Coloca el cursor sobre cada una de las imágenes para ver el efecto en acción. Haga clic aquí para lanzar el Dabblet en vivo.
Producto terminado
¡Todos hemos terminado! Como mencioné en la introducción, la página de demostración también incluye algunas versiones alternativas del efecto. Hay tres en total: panorámica, acercar y alejar. Haga clic en el enlace de abajo para comprobar que funciona.
Manifestación: Haga clic aquí para lanzar.
Conclusión
Este proyecto extendió nuestra zona de confort al adoptar un enfoque diferente a un fondo animado. En lugar de usar CSS para colocar la imagen, pudimos lograr el efecto con el texto y la imagen en nuestro marcado. Es una especie de opuesto al típico, ¿menos margen? Estrategia, pero es una buena experiencia de aprendizaje. Ser capaz de trabajar con cualquiera de los escenarios te hará un mejor programador, capaz de manejar muchos obstáculos diferentes.
En una nota al margen, una de las cosas que siempre me molesta con CSS es el hecho de que a menudo desencadenan algunos efectos visuales involuntarios en la carga de la página. Así que a medida que la página se está dibujando, las transiciones hacen que el proceso normalmente instantáneo sea largo e incómodo. Sé que esto puede solucionarse con JavaScript, pero si tiene una solución CSS pura, me encantaría escucharla. Para la demostración, simplemente apliqué las animaciones a los selectores de desplazamiento, pero esto mata la animación de desplazamiento hacia fuera. ¿Sabes de una manera mejor? Déjame saber abajo en los comentarios.