Cómo crear una transición de imagen separada con los efectos del desfile de Div

Los efectos de divilización nos permiten crear animaciones de transición excepcionales que puedan sorprender a los visitantes con un diseño atractivo. Las imágenes, en particular, pueden presentar el poder de estos efectos de manera sorprendente. En este tutorial, explicaremos paso a paso cómo crear una transición de imagen separada con los efectos de desplazamiento de Div. Este efecto se presentó inicialmente en la página de demostración. El efecto implica el corte previo de las imágenes usando un editor de fotos como Photoshop (es bastante fácil de hacer). Después de cortar las imágenes, todo lo que tenemos que hacer es agregarlas a la división y usar los efectos de desfile incorporados para que ocurra la magia.
Vamos a empezar. Tirar con el ojo es un vistazo al diseño de hoy.

También puede ver la demostración original de diseño en vivo en la página de demostración, bajo el título “El ejercicio no debe ser aburrido”. Descargue el aspecto de división de transición gratuita para poner su mano en el aspecto de 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”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Además del entorno de la divina anterior, necesitará:
Dos imágenes (al menos 1080px 540px)
Un software de edición de fotos de Photoshop para cortar las imágenes antes de agregarlas al Div.
Parte 1: navegar las imágenes en Photoshop antes de comenzar a crear nuestro diseño en la división, debemos cortar las dos imágenes que se utilizarán para el efecto de la transición. Ambas imágenes tendrán que cortarse para que sean exactamente 1080px con 540px. Después de eso, deben cortarse en 8 partes iguales (4 en el ancho, 2 hacia abajo). Una vez listos, podemos guardarlos en nuestra computadora y cargar las rebanadas de imagen en nuestro sitio. Comencemos con la primera imagen. Imagine el # 1 cortando la imagen Lo primero que debemos hacer es cortar la imagen para que tengan las dimensiones exactas de 1080px por 540px. Puede usar cualquier software de edición de imágenes para hacer esto. En Photoshop, puede usar la herramienta de corte.
Felicitando la imagen y luego haga clic para usar la herramienta en rodajas y seleccione toda la imagen. Right Haga clic en el corte / imagen y seleccione la opción División de corte.
En el cuadro de opción Divide Slice, actualice lo siguiente: Divide horizontalmente en:

2 rebanadas hacia abajo, espaciadas uniformemente

270 píxeles en la rebanada
Dividir verticalmente en:
4 rebanadas, espaciadas uniformemente
270 píxeles en la rebanada
Luego haga clic en Aceptar.
Guarde las rebanadas de imagen ahora tenemos una imagen cortada en 8 bloques iguales, cada uno de ellos 270px en 270px. Para guardar las rebanadas de imagen, explore el archivo> exportar> rescate para la web.
Luego elija el formato de archivo y haga clic en Guardar.

En el cuadro emergente, asegúrese de actualizar lo siguiente:

Guardar como: [Ingrese el nombre de las imágenes]
Formato: solo imágenes
Configuración: Configuración predeterminada
Slices: todas las rebanadas
Luego haga clic en Guardar.
Ahora todas las rodajas de su imagen se guardarán en la computadora, listas para cargarse en la división. Imaginea # 2 para crear la segunda imagen requerida para este efecto de transición de imagen por separado, debemos seguir el mismo proceso (cortar, cortar y rescate) que Solía ​​crear la primera imagen.
Sin embargo, gire las rodajas de imagen, debido a la forma en que funciona el efecto de rotación rotativa, cada una de las rodajas de imagen que componen la segunda imagen tendrá que rotar con 90 grados, ya sea a la izquierda o a la derecha. Para rotar una imagen, puede usar Photoshop o software de edición de imágenes incorporado en su sistema operativo (incluso puede usar la Galería de Medios de WordPress para editar y rotar las imágenes después de cargarlas a su sitio).

Aquí hay una guía de cómo se deben girar las imágenes en su posición original al cortar la imagen. Aquí está la imagen original.
Así es como se deben girar las rebanadas de imagen antes de cargarlas en su sitio.

Esto es necesario para poder lograr el próximo efecto de desarrollo.

Ahora que ambas imágenes se cortan, cortan, guardan y giran, está listo para agregarlas a su DIV. Debe tener un total de 16 imágenes (8 de la imagen uno y 8 de la imagen 2). Parte 2: Creación del efecto de la transición de la imagen por separado en la división Una vez que los tipos de imagen están listos, podemos comenzar el proceso de diseño en la división. Aquí le mostramos cómo hacerlo.

Agregue la fila # 1 para comenzar, cree una fila de cuatro columnas.

Configuración de fila Abra la configuración de la fila y actualice lo siguiente:

El ancho de la canaleta: 1
Ancho máximo: 1080px (escritorio), 540px (tableta y teléfono)

Forro: 0 px arriba, 0 px abajo
Desbordamiento horizontal: visible
Desbordamiento vertical: visible
Actualice la conexión de la sección porque posicionaremos el segundo absolutamente por encima de la primera fila, debemos eliminar el revestimiento superior (e inferior) de la sección para que no arroje la posición de la segunda fila. Abra la configuración de la sección y actualice lo siguiente:
Forro: 0 px en la parte superior, 0 px a la izquierda
Agregando imágenes en primer lugar, agregaremos cada una de las 8 imágenes / rebanadas que componen la primera imagen. Las imágenes deben colocarse en columnas exactamente como se cortaron en Photoshop (4 en ancho y 2 hacia abajo). Aquí hay una ilustración de cada imagen etiquetada con un número. Esto debería cuidar todas las imágenes en una fila. Imagen # 1 Agregue el primer módulo de imagen en la columna 1.

Luego cargue la primera porción de imagen en el modo.

Efectos en la pestaña Avanzada, agregue los siguientes efectos de imagen.

Habilitar el desvanecimiento dentro y fuera: Sí

Opacidad inicial: 100% (con una vista del 20%)

Opacidad promedio: 100% (con una vista del 20%)
Opacidad final: 0% (a 50% de vista)
Haga clic en la pestaña Escala y actualice lo siguiente:
Active la escala hacia arriba y hacia abajo: sí
Escala de inicio: 100% (con una vista del 20%)

Escala promedio: 70% (al 32% – 48% de vista)
Escala de conclusión: 100% (al 60% de vista)
Haga clic en la pestaña Rotire y actualice lo siguiente:
Activar la rotación: si
Rotación de inicio: 0 grados (a 0% de vista)

Rotación media: 0 grados (con una vista del 20%)
Rotación final: -90 grados (a 60% de vista)
El efecto de desplazamiento se mostrará de esta manera cuando te desplaces hacia abajo.
Imagen # 2 para crear la imagen no. 2, copie la imagen no. 1 y coloque el duplicado en la columna 2. Detén el módulo de imagen duplicada con la imagen # 2.
Actualice el efecto de desplazamiento, mantendremos la mayoría de los mismos efectos del curso tomados de la imagen # 1. Lo único que necesitamos cambiar es la rotación. Vaya a la pestaña avanzada y cambie la rotación final a 90 grados (en lugar de -90 grados) para que gire en la dirección opuesta.

Rotación final: 90 grados

Imagen # 3 Para crear la imagen # 3, copiar y pegar la imagen # 1 en la columna 3 y luego cambiar la imagen a la imagen # 3.

Imagen # 4 Para crear la imagen # 4, Copiar y pegar la imagen # 2 en la columna 4 y actualizar la imagen a la imagen # 4.

Imagen # 5 para crear la imagen no. 5, copie la imagen no. 1, de modo que el duplicado esté directamente debajo de la columna 1.
Actualice la imagen a la imagen no. 5. Luego actualice el efecto de contaminación de hambruna dentro y fuera de la siguiente manera:

Opacidad inicial: 100% (al 0% de vista)

Opacidad promedio: 100% (al 0% de vista)

Opacidad final: 0% (a 40% de visualización)

Luego actualice el efecto de desplazamiento de escalado hacia arriba y hacia abajo de la siguiente manera:
Escala inicial: 100% (al 0% de vista)
Escala promedio: 70% (al 12% – 28% de vista)
Escala final: 100% (a 40% de visualización)

Y finalmente actualice el efecto de desplazamiento rotativo de la siguiente manera:
Rotación de inicio: 0 grados (a 0% de vista)
Rotación promedio: 0 grados (a 0% de vista)
Rotación final: 90 grados (con una vista del 40%)

Imagen # 6 para crear la imagen no. 6, copie la imagen no. 5 y muévalo a la columna 2 (debajo de la imagen no. 2).
Actualice el módulo de imagen con la imagen # 5. Luego ajuste el efecto de desplazamiento rotativo en la dirección opuesta (-90 grados) de la siguiente manera: Rotación final: -90 grados
Imagen # 7 Para crear la imagen # 7, copiar la imagen # 5 y muévala debajo de la imagen # 3 de la columna 3. Luego actualice el módulo de imagen duplicada con la imagen # 7.
Imagen # 8 Para crear la imagen # 8, copie la imagen # 6 y muévala en la imagen # 4 de la columna 4. Luego actualice el módulo de imagen duplicada con la imagen # 8.

Ahora, todas las rebanadas de imagen se han agregado a su vez # 1 con el efecto de desfile por separado. Así es como se ve el resultado hasta ahora.

Agregar fila # 2 La segunda fila de imágenes no tardará mucho en diseñarse. Todo lo que tenemos que hacer es doble fila # 1, actualizar todas las imágenes con las correctas y luego darle una posición absoluta. Continuar y duplicar el giro # 1.
Actualice la imagen de la fila 2 Recuerde las imágenes rotadas que creamos para la imagen no. 2. Ahora, todo lo que tenemos que hacer es cargar cada uno en la ubicación correcta del módulo de imagen en la fila # 2.

Actualizar la imagen de la imagen Una vez que las nuevas imágenes rotadas estén en su lugar, necesitamos eliminar el decolorado dentro y fuera de todas las imágenes en la fila # 2. Haga esto, implementa el modo de vista de estructura de alambre y use múltiples selecciones para seleccionar las 8 imágenes en Fila # 2. Luego abra la configuración de una de las imágenes seleccionadas para implementar la configuración del elemento. Bajo la opción de desvanecimiento de efecto adentro y hacia afuera, actualice lo siguiente:

Habilitar el desvanecimiento dentro y fuera: no

Posición fila # 2 Nuestro último paso es colocar la fila # 2 directamente detrás de la fila # 1. Una manera fácil de hacerlo es dar el giro y la posición absoluta. Abra la configuración para la fila 2 y actualice lo siguiente: Posición: Absoluto

Ubicación: el centro superior

Resultado final Para ver el resultado, es posible que deba darle a su sección un margen superior e inferior significativo o crear otras secciones por encima y por debajo del diseño. Esto le dará la habitación que necesita para ver el efecto correcto del curso. Verifiquemos el resultado final.

Y aquí está el móvil.
Pensamientos finales Esta transición de imagen separada es un diseño impresionante en sí mismo, pero puede usarlo fácilmente para transmitir a los visitantes un mensaje de transformación (como antes y después). Tampoco tienes que estar satisfecho con este diseño. Siéntase libre de experimentar diferentes efectos del curso para crear transiciones de imágenes aún más sorprendentes. ¿Tienes ideas? Espero tener noticias suyas en los comentarios. ¡Suerte!