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 felices y estáticas, dejando que las imágenes funcionen para trabajar. Pero, al agregar un efecto deslizante de rompecabezas en una galería de imágenes (como lo haremos en este tutorial), puede poner un giro refrescante a un clásico atemporal. En este tutorial, le mostraremos cómo construir un aspecto simple que revele una galería de imágenes con el rompecabezas deslizante en la división. La clave es comprender cómo el tamaño de las imágenes se relaciona con los valores de calcomanía vertical y horizontal de cada efecto de desplazamiento para mover la imagen exactamente con un punto. Pero, una vez completado, el efecto de movimiento resultante es claro y preciso, porque ensambla y revela progresivamente una galería de imágenes de una manera única.
Eye es un vistazo rápido a la aparición de la galería de imágenes con el efecto del rompecabezas deslizante que crearemos en este tutorial.

Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Encuentre o corte al menos 4 imágenes cuadradas que tengan altura y ancho idénticos. Para este tutorial, utilizaremos imágenes cortadas del paquete de disposición de cerámica, que son exactamente 500 PX con 500 PX.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Construyendo la sección del encabezado para comenzar las cosas, construyamos una sección de títulos rápidos que notifique al usuario que desplazue la página para ver la galería y con los maravillosos efectos. Agregue la fila Agregar una fila con una columna a la sección predeterminada.
Agregue 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 la siguiente configuración de modo de texto:

Galería de imágenes

en la pestaña Diseño, actualice el diseño de texto de la siguiente manera:

Título de la fuente: Roboto

Título Fuente de peso: Bold
Estilo de fuente de título: TT
Alineación del texto del encabezado: Centro
Encabezado de texto de tamaño: 50 PX (escritorio), 40 px (tableta y teléfono)
Distancia entre letras: 4 PX
Agregue el icono del módulo de propaganda después de que el texto esté en su lugar, agregue un nuevo módulo de propaganda debajo del módulo de texto.
Luego elimine todo el título predeterminado y el contenido del cuerpo y seleccione para usar el icono de flecha.

Configuración de la propaganda luego actualice la configuración de la propaganda con un nuevo color y una animación de diapositivas repetida.

Icono de color: # FFB500

Estilo de animación: diapositiva
Dirección de la animación: Down
Intensidad de animación: 20%
Repita la animación: bucle
La sección de revestimiento para dar la sección de espacio de espacio, actualice el relleno de la siguiente manera:
Junta: 20 VH arriba, 50 VH abajo

Aquí usamos la unidad de longitud VH, que es relativa a la altura de la ventana del navegador, para que el espacio se ajuste constantemente en todas las dimensiones del navegador.
Creando la galería de imágenes con efectos ahora que nuestra sección de título está completa, estamos listos para construir la galería de imágenes con los efectos deslizantes del rompecabezas. Toda la galería consistirá en tres filas de 4 imágenes / columnas en cada fila para hacer un total de 12 imágenes. Sin embargo, puede agregar fácilmente varias líneas e imágenes a la apariencia después de su finalización. Construyendo la sección y la fila Agregue una nueva sección para comenzar agregando una nueva sección habitual en la sección de títulos.
Configuración de fila En la configuración de la fila, actualice lo siguiente:

El ancho de la canaleta: 1

Ancho: 100%

Ancho máximo: 1200 PX (escritorio), 600 PX (tableta), 300 PX (teléfono)
La forma en que el ancho de la fila determina el tamaño de la imagen, el ancho de la fila es muy importante para este diseño, porque dictará el ancho de cada una de las cuatro columnas. Una vez que establecamos el ancho de la canaleta en 1, no habrá margen entre las imágenes. Y cuando establecemos el ancho máximo en 1200 PX, el aspecto de las cuatro columnas hará que cada una de las columnas / imágenes tenga un ancho de 300 PX (1200 PX / 4 = 300 PX). Además, debido a que cada una de las imágenes es cuadrada, sabemos que la altura de cada imagen también será de 300 px. No tenemos que mantenerlo así si no lo hacemos. Por ejemplo, también podríamos elegir mirar con tres columnas con imágenes de 400 x 400 PX. Usted sabe que el ancho de la imagen (300 px) y la altura (también 300 px) serán la clave para crear el efecto de desarrollo posterior.
Agregar imágenes Agregar imagen 1
Imagen 1 Efectos Scroll

Cómo informar el tamaño de la imagen a las compensaciones del efecto de desarrollo Cuando se usa el efecto de desarrollo vertical y horizontal, es importante comprender qué ingresó el valor del número. En este ejemplo, tenemos un movimiento vertical que comienza con -3. Este -3 es en realidad -300px (o 300px hacia la parte inferior), que es el ancho de la imagen. Luego, el desplazamiento alcanza 0 (posición inicial) a medida que se ejecuta el usuario. Este es el que crea el efecto de desarrollo que mueve la imagen sobre exactamente un bloque / imagen. El movimiento horizontal comienza en 3 (300 px desde la derecha) y se detiene en su posición predeterminada. Estos dos efectos se combinan para crear un efecto único de curso de dos partes. Pature Image 2 Una vez que se han agregado los efectos de desplazamiento a la imagen 1. Agregue una nueva imagen en la columna 2.

Dejaremos esta imagen estática sin desarrollar efectos. Agregue la imagen 3 y luego, agregue otro módulo de imagen a la columna 3 y actualice el módulo con una nueva imagen.

Imagen 3 Efectos que se someten a configuración de imagen, actualice los siguientes efectos: En la pestaña Movimiento horizontal …

Active el movimiento horizontal: sí
Comenzando el desplazamiento: -3 (con una vista del 0%)


Compensación promedio: 0 (Vista de 15%)

Compensación final: 0 (a 100% de vista)
Agregue la imagen 4 para crear la última imagen, copie la imagen 1 y pegue a la columna 4.
Sube una nueva imagen en la configuración de la imagen.
Imagen 4 Efectos Scroll Luego actualice los siguientes efectos: En la pestaña Movimiento Vertical …
Habilitar el movimiento vertical: sí

Comenzando el desplazamiento: 3 (al 0% de vista)

GABE ADRIO: 0 (a 15% -28% de vista)

Compensación final: 0 (Vista al 40%)
Bajo la pestaña Movimiento Horizontal …
Habilitar movimiento horizontal: inicio daoffset: 3 (al 0% de vista)
GAPACIÓN PROMEDIA: 3 (Vista al 28%)
Compensación final: 0 (Vista al 40%)
La fila duplicada ahora que los efectos de la imagen están completos para la primera fila, todo lo que tenemos que hacer es duplicar la fila para crear más imágenes y los efectos apropiados. Para este ejemplo, dupliquemos el giro dos veces para crear un total de tres líneas.
Reemplace y reorganice las imágenes según sea necesario, podemos mover las imágenes usando la función de arrastrar y soltar donde quiera. Aquí puede ser creativo y puede ver cómo se mueven las imágenes. Y una vez que las imágenes están en su lugar, puede reemplazar el contenido del módulo de imagen con nuevas imágenes que se adaptan a las necesidades del sitio web.
Retocando final la sección de visibilidad porque nuestras imágenes probablemente se extenderán fuera de la sección / ventana, para ocultar el derrame para limpiarlo un poco. Abra la configuración de la sección y actualice lo siguiente:
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto

La sección del revestimiento queremos que el efecto de desarrollo vertical de la imagen superior (que se extiende por encima de la sección) sea visible a pesar del flujo oculto. Entonces, agregue el relleno superior e inferior igual a la altura de la imagen (300 PX).

El resultado hasta ahora en este momento podemos parar aquí si desea mantener el diseño de la galería sin espacios. Así es como se ve el resultado hasta ahora. Observe lo hermosas que las imágenes se mueven verticalmente y horizontalmente exactamente un bloque / imagen.

Agregando el espacio entre las imágenes porque establecemos el ancho de la canaleta en 1, no tenemos margen entre columnas o imágenes. Para recrear una distancia similar, podemos agregar relleno a cada imagen. Esto nos permitirá crear el espacio que necesitamos sin comprometer la funcionalidad de los efectos. Esto es posible, porque la adición del revestimiento de la imagen no se agregará al ancho o la altura del contenedor de imagen (para obtener más detalles, lea sobre el tamaño de la caja en la división). También puede tener un efecto similar usando los bordes. Imagen 1 Reinicio Abra la configuración para la imagen 1 y actualice lo siguiente: ENLAYO: 10 PX hacia arriba, 10 px abajo, 10 px izquierda, 10 px a la derecha
Extienda el revestimiento a todas las imágenes antes del rescate, haga clic en la opción de llenado y seleccione “Extender el relleno”. En la ventana emergente, extiende los estilos, haga clic en el botón Extender para expandir ese revestimiento a todas las imágenes de la página.
¡El resultado final es! Aquí está el resultado final en el escritorio.

Aquí está la tableta y el teléfono.