Cómo crear animaciones superpuestas tarde con div Div

Gran parte del éxito de su sitio web depende de la posibilidad o no para impresionar a sus visitantes. No solo con sus productos o servicios, sino también con la forma en que se comunica y qué tan bien diseñado está su sitio web. Debido a que reconocemos, los sitios web son a menudo las primeras impresiones. Y similar a cualquier otro tipo de primera impresión, desea dejar una buena publicación. Ahora, si está buscando una forma única de poner parte de su contenido en el centro de atención, crear animaciones sutiles superpuestas podría ser exactamente lo que está buscando. Estas animaciones sutiles superpuestas son una especie de presentación de diapositivas para sus visitantes. No tienen que ejecutar ni hacer clic en nada, el contenido solo aparece de manera elegante.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Acercarse
Comenzaremos agregando todos los elementos de diseño que necesitamos en un orden vertical sin superposición.
A medida que agregamos todos los elementos de diseño, agregaremos animaciones personalizadas con un cierto retraso de animación
Estos retrasos de animación solo tendrán sentido después de haber viajado la última parte del tutorial que se centra en la superposición
Una parte importante de este tutorial es el uso de los módulos divisores en forma con el mismo color de fondo que la sección para que el contenido del contenido desaparezca.
Puede aplicar esta técnica a cualquier tipo de diseño para el que trabaje después de comprender los diferentes pasos necesarios para el enfoque de trabajo.
¡Empecemos a crear! Agregue un nuevo color de fondo Abra la configuración de la sección y agregue un fondo. Fondo de pantalla: # F3F3EC
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a su sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla. La razón por la que hacemos esto es deshacerse de todos los espacios de píxeles predeterminados. En los próximos pasos, agregaremos todo el espacio que necesitamos usando una unidad de visualización.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Agregue un módulo de texto a la columna Agregar contenido H2 ¡Comencemos a agregar módulos! El primer módulo que necesitamos es un modo de texto con contenido H2. Recuerde que este módulo “desaparecerá” después de unos segundos, por lo que desea mantenerlo breve, relevante y memorable.

Configuración de texto H2 Luego acceda a la pestaña de diseño y cambie la configuración de texto H2.

2 Sección de fuentes: Poppins
Rúbrica 2 Color de texto: # 333333
Rúbrica 2 Dimensión de texto: 5VW
Espacio Cree el espacio que desea usar algunos rellenos izquierdo y derecho en la configuración de espaciado.

Junta izquierda: 15 VW
Junta derecha: 39VW
Agregue el módulo divisor al interruptor de visibilidad de la columna al siguiente módulo, que es un módulo divisor. Usamos este módulo para que el módulo de texto “desaparezca”. Hay cuatro cosas que necesitaremos para ello; Un color de fondo (que tiene el mismo color que la sección, por lo que no puede verlo), suficiente relleno (para asegurarse de que puede superponer todo el contenido del módulo anterior), una superposición vertical (para cubrir todo el módulo de zona ) y un retraso en la animación (para dar la primera vez la forma de brillar antes de hacerse cargo). Después de agregar el módulo Divisor, asegúrese de apagar la opción “División de visualización”. Divisor: No

El color de fondo luego accede a la configuración de fondo y agregue un color de fondo. Asegúrese de usar el mismo color de fondo que la sección para crear un efecto suave.
Color de fondo: # F3F3EC

El espacio continúa dando al módulo divisor una dimensión más grande al agregar rellenos superior e inferior a la configuración de espaciado.
Revestimiento superior: 9VW

Revestimiento inferior: 9VW
Animación y complete la configuración del divisor agregando una animación retrasada.
Estilo de animación: diapositiva

Dirección de Animación: Up
Duración de animación: 1200 ms
Retraso de animación: 1500 ms
Intensidad de animación: 50%
Opacidad de animación de inicio: 50%
¡Agregue la estructura de la fila # 2 de la columna por segundo! Seleccione la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Espacio y luego, agregue algunos rellenos al lado izquierdo y derecho de la fila en la configuración de espaciado. Cabeza izquierda: 10 VW (escritorio), 2 VW (tableta y teléfono)
Revestimiento derecho: 10 VW (escritorio), 2 VW (tableta y teléfono)

La pantalla también se aseguró de que las columnas aparezcan una al lado de la otra en dimensiones de pantalla más pequeñas, agregando una sola línea de código CSS al elemento principal de la fila.
Pantalla: Flex;
¡Agregue los módulos de blurb a la columna 1 Agregar contenido es hora de comenzar a agregar módulos! Agregue un módulo de propaganda a la columna 1 e ingrese un contenido de su elección.

Seleccione el icono Continuar seleccionando un icono de su elección.
La configuración de los íconos continúa cambiando la apariencia del icono.

Icono de color: # dbd6bd

Icono del círculo: si

Icono de círculo: #ffffff
Colocación de la imagen / icono: arriba
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 2.5VW (escritorio), 1.7VW (tableta), 1.9VW (teléfono)
Configuración de texto de título Modificar y configuración para el texto del título.
Fuente del título: Source Serif Pro
Alineación del texto del título: Centro

Título Tamaño del texto: 1.7VW (escritorio), 2.1VW (tableta), 2.5VW (teléfono)
Altura de la línea de título: 1.9em
Configuración de texto del cuerpo junto con la configuración de texto de su cuerpo.
Font Corp: Open Sans
Alineación del texto del cuerpo: Centro


Tamaño de texto del cuerpo: 0.8VW (escritorio), 1.2VW (tableta), 1.6VW (teléfono)
La altura de la línea del cuerpo: 2.5em
Dimensión Reduce fácilmente el tamaño del módulo para garantizar que haya suficiente espacio entre este módulo y los módulos que agregaremos en la segunda y tercera columna.
Ancho: 91.7%
Alineación del módulo: centro

Espacio también agregaremos espacio adicional al módulo utilizando valores de llenado personalizados. Mayor cabeza: 2VW
Revestimiento inferior: 2VW
Lengo izquierdo: 1VW

Junta derecha: 1 VW
Border luego acceda a la configuración del borde y agregue un borde sutil para definir el módulo.
Ancho fronterizo: 1 PX
Color del borde: # 333333
Animación Complete el diseño del módulo de propaganda agregando una animación retrasada. Como puede ver, cuantos más elementos de diseño, mayor sea el retraso de la animación.

Estilo de animación: diapositiva
Repita la animación: una vez
Dirección de Animación: Up

Duración de animación: 1000 ms
Retraso de animación: 2000 ms
Animación de intensidad: 16%
Opacidad de animación de inicio: 0%
Clonar el módulo de propaganda dos veces y colocar los duplicados en las columnas restantes después de haber completado el diseño del módulo de propaganda, puede continuar el clon dos veces. Coloque los duplicados en las dos columnas restantes de la fila.
Cambie la animación duplicada no. 1 Cambie el retraso en la animación del primer duplicado.
Retraso de animación: 2200 ms
Cambie la animación duplicada no. 2 Luego abra el segundo duplicado y cambie el retraso de animación.

Retraso de animación: 2400 ms

Agregue un módulo divisor en la visibilidad de la columna 3 El siguiente y último módulo que necesitamos en esta fila es un módulo divisor. Nuevamente, usamos este módulo para crear una superposición retrasada, lo que ayudará a la “desaparición” de los módulos de propaganda. Una vez que haya agregado el módulo Divisor a la columna 3, asegúrese de que la opción “Divisor de visualización” esté desactivada.
Divisor del espectáculo: no

El color del sótano continúa agregando un color de fondo al divisor. Asegúrese de usar el mismo color que para el fondo de la sección. Fondo de pantalla: # F3F3EC
Espacio entonces, iremos a la configuración de espaciado y aumentaremos el tamaño del módulo divisor, de modo que, más adelante en esta publicación, se superponga en los tres módulos de propaganda.

Margen izquierdo: -60VW (escritorio), -64VW (tableta y teléfono)
Revelaje superior: 17VW (escritorio), 27VW (tableta), 30VW (teléfono)

Bajo forro: 17 VW (escritorio), 27VW (tableta), 34VW (teléfono)
Animación por último, pero no menos importante, agregue una animación retrasada.

Estilo de animación: diapositiva
Repita la animación: una vez
Dirección de la animación: correcto
Duración de la animación: 650 ms

Retraso de animación: 4500 ms
Intensidad de animación: 24%
Opacidad de animación de inicio: 0%
Clone Row # 2 Después de haber completado la segunda fila y todos sus módulos, puede continuar el clon.
Elimine el módulo divisor en la nueva fila Eliminar el módulo divisor de la fila duplicada.
Cambie el retraso de animación en el módulo de la propaganda # 1 y luego abra el primer módulo de blurb y cambie el retraso de animación.
Retraso de animación: 5200 ms
Cambie el retraso en la animación del módulo de la propaganda, haga lo mismo para el módulo de la propaganda en la columna 2.

Retraso de animación: 5400 ms

Cambie el retraso en la animación del módulo de la propaganda # 3 y cambie el retraso de animación para el módulo de la propaganda y en la columna 3.

Retraso de animación: 5600 ms
Agregue la superposición Agregar superposición al Módulo Divisor # 1 Ahora, que tenemos todos los elementos de diseño que necesitamos, ¡podemos comenzar a crear superposiciones! Estas superposiciones tendrán sentido para los retrasos de animación que hemos agregado a lo largo del tutorial. Comience con el módulo divisor desde la primera fila que creó.

Agregue la superposición en la fila 2 y luego abra la segunda fila y agregue un margen superior negativo.
Margen superior: -10VW

Agregue la superposición a los módulos de la propaganda en la fila # 2 Abra cada uno de los módulos de blurb de segunda fila y agregue algunos valores de margen personalizados.
Margen superior: -10VW

Margen inferior: 7VW
Agregue superposición al módulo divisor no. 2 Vaya al módulo divisor que puede encontrar en la tercera columna de la segunda fila y cree superposición.

Margen superior: -35VW (escritorio), -47VW (tableta), -72VW (teléfono)
Agregue la superposición en la fila # 3 Continúe abriendo la configuración de la tercera fila y agregue un margen superior negativo.

Margen superior: -10VW
Agregue la superposición a los módulos de la propaganda en la fila # 3, no menos importante, agregue algunos valores de margen personalizados a cada uno de los módulos de propaganda en el tercero. Una vez que salgas de Visual Builder, ¡podrás ver la animación que tiene lugar en tiempo real!
Margen superior: -22VW (escritorio), -46VW (tableta), -70VW (teléfono)

Margen inferior: 7VW