Cómo crear un efecto de desfile de capa extendida para interacciones con aplicaciones en la división

La presentación de cualquier aplicación o producto en su sitio web no debe limitarse a imágenes estáticas o gráficas. Con los efectos de desplazamiento de DIV, puede dar vida a las ilustraciones de las aplicaciones agregando animaciones sutiles y eficientes para atraer a los visitantes. En este tutorial, descubriremos una manera simple de crear un efecto de llevar a cabo las capas expandibles en la división. Solo se necesitan tres imágenes (o capturas de pantalla) con las mismas dimensiones y toda la magia construida del Divi Builder. Saltemos directamente y comencemos. Tirar del ojo


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.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en Divi Builder.
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. Creación de las capas extendidas para una ilustración de aplicación cautivadora en la división Agregar a una fila agregando una fila con 2 columnas (mitad).
Agregue un margen temporal a la sección para poder obtener una vista previa previamente de los efectos de desarrollo, agregue algunos bordes superior e inferior a la sección, de la siguiente manera:

Edge: 80VH arriba, 80 VH abajo
Agregue 3 imágenes como capas, crearemos tres imágenes que servirán como tres capas de la ilustración de la aplicación. La idea es usar tres imágenes (o capturas de pantalla) de las funciones de aplicación que tienen el mismo tamaño / dimensiones, de modo que las imágenes se ajustan perfectamente una encima de la otra. Luego moveremos las tres capas usando efectos de la división. Comencemos con la primera imagen. Cree la imagen 1 Agregue un módulo de imagen a la columna izquierda.

Luego suba la primera imagen en el modo. Recuerde asegurarse de que las tres imágenes tengan las mismas dimensiones. Tiene 500 PX con 1050 px.

Configuración de imagen 1 Abra la configuración del módulo de imagen y actualice lo siguiente: Ancho y margen: 300 PX (escritorio y tableta), 150 PX (teléfono)

Alineación del módulo: izquierda
Marja: 0 px a continuación
Frontera
Esquinas redondeadas: 40 px

Ancho fronterizo: 15 PX
Color del borde: #ffffff
Sombra de la caja
Box Shadow: Ver captura de pantalla

Box Shadow Posición vertical: 0px
Poder de poco claro de la sombra de la caja: 48 px
Color de la sombra: RGBA (0.0,0,0,2)
Cree la imagen 2 para crear la imagen 2, copie la imagen 1.
Luego actualice el módulo de imagen duplicada con una nueva imagen que tiene las mismas dimensiones (500 PX con 1050 PX).

Configuración de imagen 2 Luego, retire el borde actualizando lo siguiente: Border

Ancho fronterizo: 0 PX

No necesitamos un borde para esta imagen, pero debemos reemplazar el espacio entre los bordes con relleno para garantizar que las imágenes estén perfectamente apiladas.
Recubrimiento

Forro: 15 px arriba, 15 px abajo, 15 px izquierda, 15 px a la derecha

Posición y luego actualice la posición para la imagen 2 a absoluto. Esto hará que la imagen 1 se superponga perfectamente.
Posición: Absoluto

Para obtener más información, consulte nuestra publicación completa sobre cómo usar la posición absoluta en el Div.
Los efectos ejecutados ahora es el momento de agregar el efecto de desarrollo que mueve nuestra capa (imagen 2) al desplazar la página hacia abajo. Actualice los efectos de desplazamiento de la siguiente manera: en la pestaña Movimiento vertical …

Habilitar el movimiento vertical: sí
Comenzando el desplazamiento: 0 (al 0% de vista)
GAPACIÓN PROMEDIAL: 0 (al 0% de vista)
Compensación final: -1 (a 100% de vista)
Bajo la pestaña Movimiento Horizontal …
Active el movimiento horizontal: sí

Comenzando el desplazamiento: 0 (al 0% de vista)
GRACO ADRIO: 1 (al 50% de vista) Compensación final: -1.5 (visión 100%)
Debajo de la pestaña que se desvanece dentro y fuera …
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 0% (al 0% de vista)

Opacidad promedio: 100% (al 10% -15% de vista)
Opacidad final: 70% (al 30% de vista)
Cree la imagen 3 Una vez que se hayan agregado todos los efectos de desarrollo a la imagen 2, estamos listos para crear la imagen 3. Abra el menú Configuración en la parte inferior del fabricante y seleccione el botón Capas para implementar la ventana emergente de capas. Luego, copie el módulo de imagen 2 en la columna 1 para crear la imagen 3. El uso de la función de capa es útil, ya que es difícil seleccionar los módulos superpuestos.
Ahora abra la configuración para la imagen duplicada (imagen 3) y cargue una nueva imagen. Asegúrese de conservar las mismas dimensiones (500 PX con 1050 PX).
Efectos de la imagen 3 En la pestaña Avanzada, actualice las opciones de los efectos para la imagen 3. En la pestaña Movimiento vertical, actualice el espacio de movimiento vertical de la siguiente manera:

Compensación final: -2 (a 100% de vista)

Debajo de la pestaña Movimiento Horizontal, actualice el movimiento horizontal de la siguiente manera:

GAPACIÓN PROMEDIA: 2 (Vista al 50%)
Compensación final: 3 (a 100% de vista)

En la pestaña Fading Into and Out, actualice la configuración del desvanecimiento y salga de la siguiente manera:
Opacidad inicial: 5% (al 0% de vista)
Opacidad promedio: 100% (al 30% -40% de vista)

Opacidad final: 100% (al 50% de vista)
Resultado Consulte el resultado hasta ahora.
Agregar transformación sesgada en la columna 1 Este es un efecto excelente como es, pero distorsionaremos la columna para crear más un efecto 3D. Abra la configuración para la columna 1 y agregue una distorsión de transformación de la siguiente manera: Transformación (ejes x e y): 8 grados crearán un hermoso efecto 3D en las capas en expansión. ¡Eso es todo! Opcional: Agregue CTA a la columna 2 Ahora podemos agregar cualquier título y botón (o cualquier CTA) a la columna derecha con algunos efectos de desfile gratuitos. Consulte la descarga gratuita de este aspecto anterior para obtener el mismo CTA en esta ilustración.
El resultado final aquí es el resultado final.

Así es como se almacenan en la tableta y el teléfono.

El uso de imágenes de un paquete de división de diseño Las imágenes utilizadas en este tutorial son imágenes simuladas de Shutterstock y también se presentan en nuestra página demostrativa de los efectos. Para cambiar el diseño para satisfacer sus propias necesidades, puede usar imágenes de nuestros paquetes de diseño gratuitos o crear sus propias capturas de pantalla. Aquí hay un ejemplo de diseño que utiliza las imágenes en el paquete del paquete para aplicaciones móviles. También agregamos un fondo de gradiente para completar las imágenes de luz utilizadas para expandir las capas. ¡En unos minutos, tenemos un diseño completamente diferente!