Las galerías de imágenes son un destino favorito en la mayoría de los sitios web. Y, en muchos casos, puede ser mejor mantener esas galerías de imágenes alegres y estáticas, dejando que las imágenes hagan su magia.
Pero, agregue un efecto de desplazamiento de rompecabezas deslizante a una galería de imágenes (como haremos en este tutorial), puede darle un toque refrescante a un clásico atemporal.
En este tutorial, le mostraremos cómo crear un diseño simple que muestre una galería de imágenes con un efecto de desplazamiento de rompecabezas deslizante en Divi.
La clave es comprender cómo se relaciona el tamaño de las imágenes con los valores de desplazamiento vertical y horizontal de cada efecto de desplazamiento para mover la imagen exactamente un punto. Pero cuando se completa, el efecto de movimiento resultante es nítido y preciso a medida que se ensambla gradualmente y revela una galería de imágenes de una manera única.
Resultado posible
Aquí hay una descripción general del diseño de la galería de imágenes con el efecto de desplazamiento del rompecabezas deslizante que vamos a crear en este tutorial.
Creando la sección de encabezado
Para comenzar, creemos una sección de encabezado rápida que le dirá al usuario que se desplace por la página para ver la galería y con los impresionantes efectos de desplazamiento.
Agregar una fila
Agregue una fila de una columna a la sección predeterminada.
Añadir un módulo de texto.
Dentro de la columna / fila agregue un nuevo módulo de texto.
En la configuración de texto, actualice el contenido del cuerpo con lo siguiente:
<h1>Image Gallery</h1>
Configuración del módulo de texto
En la pestaña Diseño, actualice el diseño del texto de la siguiente manera:
- Fuente del título: Roboto
- Peso de la fuente del título: negrita
- Estilo de fuente del título: TT
- Alineación del texto del encabezado: centro
- Tamaño del texto del encabezado: 50 px (escritorio), 40 px (tableta y teléfono)
- Espaciado entre letras del título: 4px
Agregar un icono de módulo de Blurb
Una vez que el texto esté en su lugar, agregue un nuevo módulo de texto de presentación debajo del módulo de texto.
Luego, elimine todo el título y el cuerpo del contenido predeterminado y seleccione usar el icono de flecha hacia abajo.
Configuración de texto de presentación
A continuación, actualice la configuración del texto de presentación con un nuevo color y una animación de diapositiva repetida.
- Color del icono: # ffb500
- Estilo de animación: diapositiva
- Dirección de la animación: abajo
- Intensidad de animación: 20%
- Repetición de animación: bucle
Relleno de sección
Para dar espacio a la sección para el desplazamiento, actualice el relleno de la siguiente manera:
- Relleno: 20vh arriba, 50vh abajo
Aquí estamos usando la unidad de longitud vh que es relativa a la altura de la ventana del navegador para que el espaciado se ajuste de manera consistente en todos los tamaños de navegador.
Creación de galería de imágenes con efectos de desplazamiento.
Ahora que nuestra sección de encabezado está completa, estamos listos para construir la galería de imágenes real con los efectos de desplazamiento del rompecabezas deslizante. La galería completa estará formada por tres filas de 4 imágenes / columnas en cada fila para hacer un total de 12 imágenes. Sin embargo, puede agregar fácilmente más líneas e imágenes al diseño una vez que esté terminado.
Creando la sección y la línea
Añadir una nueva sección
Comencemos agregando una nueva sección regular debajo de la sección del título.
Agregar una fila
Luego agregue una fila con cuatro columnas a la sección.
Configuraciones de línea
En la configuración de línea, actualice lo siguiente:
- Ancho de canal: 1
- Ancho: 100%
- Ancho máximo: 1200 px (escritorio), 600 px (tableta), 300 px (teléfono)
Cómo el ancho de línea determina el tamaño de la imagen
El ancho de la fila es muy importante para este diseño, ya que determinará el ancho de cada una de las cuatro columnas. Una vez que establezcamos el ancho de la canaleta en 1, no habrá más margen entre las imágenes.
Y cuando establecemos el ancho máximo en 1200px, el diseño de cuatro columnas hará que cada una de las columnas / imágenes tenga exactamente 300px de ancho (1200px / 4 = 300px).
Además, dado que cada una de las imágenes es cuadrada, sabemos que la altura de cada imagen también será de 300 píxeles. No tenemos que mantenerlo así si no queremos.
Por ejemplo, también podríamos optar por tener un diseño de tres columnas con imágenes de 400 x 400 píxeles. Conocer el ancho de la imagen (300px) y la altura (también 300px) será la clave para crear el efecto de desplazamiento más adelante.
Agregar imágenes
Añadir imagen 1
Imagen 1 Efectos de desplazamiento
Relación entre el tamaño de la imagen y las compensaciones del efecto de desplazamiento
Al utilizar el efecto de desplazamiento vertical y horizontal, es importante comprender qué representa el valor numérico introducido. En este ejemplo, tenemos un desplazamiento de inicio de movimiento vertical de -3. Este -3 es en realidad -300px (o 300px hacia abajo) que es el ancho de la imagen.
El desplazamiento luego llega a 0 (la posición inicial) cuando el usuario se desplaza. Esto es lo que crea el efecto de desplazamiento que mueve la imagen exactamente a un bloque / fotograma. El movimiento horizontal comienza en 3 (300 píxeles desde la derecha) y se detiene en su posición predeterminada. Estos dos efectos se combinan para crear un efecto de desplazamiento de dos partes único.
Añadir imagen 2
Después de agregar efectos de desplazamiento a la imagen 1. Agregue una nueva imagen a la columna 2.
Dejaremos esta imagen estática sin ningún efecto de desplazamiento.
Añadir imagen 3
Luego agregue otro módulo de imagen a la columna 3 y actualice el módulo con una nueva imagen.
Imagen 3 Efectos de desplazamiento
En Configuración de imagen, actualice los siguientes efectos de desplazamiento:
En la pestaña Movimiento horizontal ...
- Activar movimiento horizontal: SÍ
- Inicio de desplazamiento: -3 (al 0% de la ventana)
- Desplazamiento medio: 0 (al 15% de la ventana gráfica)
- Desplazamiento final: 0 (al 100% de la ventana gráfica)
Añadir imagen 4
Para crear la última imagen, copie la imagen 1 y péguela en la columna 4.
Sube una nueva imagen en la configuración de imagen.
Imagen 4 Efectos de desplazamiento
Luego actualice los siguientes efectos de desplazamiento:
En la pestaña Movimiento vertical ...
- Activar movimiento vertical: SÍ
- Inicio de desplazamiento: 3 (al 0% de la ventana)
- Desplazamiento promedio: 0 (al 15% -28% de la ventana gráfica)
- Desplazamiento final: 0 (al 40% de la ventana gráfica)
En la pestaña Movimiento horizontal ...
- Activar movimiento horizontal: SÍ
- Inicio de desplazamiento: 3 (al 0% de la ventana)
- Desplazamiento medio: 3 (al 28% de la ventana gráfica)
- Desplazamiento final: 0 (al 40% de la ventana gráfica)
Línea duplicada
Ahora que los efectos de desplazamiento de la imagen están hechos para la primera fila, todo lo que tenemos que hacer es duplicar la fila para crear más imágenes y sus correspondientes efectos de desplazamiento. Para este ejemplo, dupliquemos la fila dos veces para crear un total de tres filas.
Reemplace y reorganice las imágenes según sea necesario
Luego podemos mover las imágenes usando la función de arrastrar y soltar donde queramos. Aquí es donde puede ser creativo y ver cómo se desplazarán las imágenes en movimiento. Y una vez que las imágenes estén en su lugar, puede reemplazar el contenido del módulo de imágenes con nuevas imágenes que satisfagan las necesidades del Sitio web.
Retoques finales
Visibilidad de la sección
Dado que nuestras imágenes probablemente se extenderán fuera de la sección / ventana, ocultemos el desbordamiento para limpiarlo un poco. Abra la configuración de la sección y actualice lo siguiente:
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Relleno de sección
Queremos que el efecto de desplazamiento vertical de la imagen superior (que se extiende por encima de la sección) sea visible a pesar del desbordamiento oculto. Así que agreguemos un relleno superior e inferior igual a la altura de la imagen (300 píxeles).
Resultado hasta ahora
Ahora mismo podemos detenernos aquí si desea mantener el diseño de la galería sin ningún espacio entre las imágenes. Así es como se ve el resultado hasta ahora. Observe cómo las imágenes se mueven vertical y horizontalmente exactamente un bloque / cuadro.
Agregar espacio entre imágenes
Debido a que establecemos el ancho del medianil en 1, ya no tenemos un margen entre nuestras columnas o imágenes. Para recrear un espaciado similar, podemos agregar relleno a cada cuadro.
Esto nos permitirá crear el espaciado que necesitamos sin comprometer la funcionalidad de los efectos de desplazamiento. Esto es posible porque agregar relleno a la imagen no aumentará el ancho ni el alto del contenedor de la imagen. También puede tener un efecto similar al usar bordes.
Imagen 1 Relleno
Abra la configuración en la Imagen 1 y actualice lo siguiente:
- Relleno: 10 píxeles en la parte superior, 10 píxeles en la parte inferior, 10 píxeles a la izquierda, 10 píxeles a la derecha
Ampliar relleno a todas las imágenes
Antes de guardar, haga clic derecho en la opción de relleno y seleccione "Extender relleno". En la ventana emergente Extender estilos, haga clic en el botón Extender para extender este relleno a todas las imágenes de la página.
Resultado final
Aquí está el resultado de todo el trabajo que hemos realizado hasta ahora.
Consideraciones finales
El efecto de desplazamiento del rompecabezas deslizante que se presenta en este artículo hace más que darnos un diseño único para una galería de imágenes. También señala que las compensaciones de movimiento horizontal y vertical se pueden utilizar para efectos de desplazamiento más precisos.
Siéntase libre de explorar diferentes variaciones de este diseño cambiando las compensaciones y mezclando las ubicaciones de las imágenes.
También puede cambiar el número de columnas siempre que comprenda cómo cambiará el tamaño de la columna / imagen y luego cómo actualizar las compensaciones del efecto de desplazamiento con el valor correspondiente.
Algunos recursos recomendados
Probablemente encontrará estos Recursos interesantes porque también te permitirán crear galerías de fotos en tu blog de WordPress.
- 10 complementos para crear galerías de fotos en WordPress
- Cómo crear una galería de fotos con el complemento Envira
- 5 WordPress plugins para crear galerías de fotos
- Cómo utilizar el módulo de galería de imágenes en Divi
