Cómo aplicar animaciones de colisión para diseñar elementos con div Div

Agregar animaciones a los elementos de diseño en su página definitivamente puede ayudarlo a aumentar su participación. Hay muchas opciones de animación disponibles en Visual Builder de Divi y son bastante simples de usar. Pero puede ser creativo con estas animaciones y usarlas de una manera única. En esta publicación, gestionaremos tres ejemplos de animaciones en colisería, que recrearemos paso a paso, utilizando solo las opciones construidas de la div. ¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido a los tres ejemplos que recrearemos en este tutorial.
Ejemplo no. 1: texto en colisión

Ejemplo no. 2: divisores que chocan

Ejemplo # 3: Grid de colisión

altísimo

Suscríbase a nuestro canal de YouTube recreos Ejemplo no. 1: Colisión de texto

¡Agregue la sección especializada para comenzar con el primer ejemplo! Abra una página nueva o existente y agregue una nueva sección especializada utilizando la siguiente estructura:

Dimensión sin agregar ningún módulo o fila, abra la configuración de la sección y active la opción “Hacer este ancho completo” en la configuración de tamaño.

Agregue la estructura de la columna de la fila # 1 Continuar agregando una fila a la sección especializada:

Dimensión Abra la configuración de la fila y realice algunos cambios en la configuración del tamaño.
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Extienda el cambio de los valores de llenado personalizados y en la configuración de espaciado.
Revestimiento superior: 44 PX
Finamiento inferior: 0 PX

Agregue un módulo de texto a la columna 1 Agregar contenido Continuar agregando un módulo de texto a la primera columna de la fila y agregar contenido.

Título de la fuente: Montserrat
Título Fuente de peso: Luz
Tamaño de texto SOT: 4.4VW (escritorio), 8.2vw (tableta), 40px (teléfono)
Altura de la línea de dirección: 0.7em
Agregue un módulo divisor en la columna 1 Visibilidad El segundo módulo requerido en la columna 1 es un módulo divisor. Asegúrese de que el divisor aparezca activando la opción “División de visualización”.

Divisor del espectáculo: si
Interruptor de color a la pestaña de diseño y cambie el color del separador.

Color: # 000000
La dimensión también reduce el ancho del separador.

Ancho: 91%
Espacio y agregue un margen superior para crear espacio entre el módulo divisor y el módulo de texto.

Margen superior: 30 PX
Animación Eventualmente, agregue una animación sutil al módulo adivino.

Estilo de animación: diapositiva
Dirección de la animación: izquierda
Agregue un módulo de texto a la columna 2 Agregue el interruptor de contenido a la segunda columna y agregue el segundo módulo de texto con un contenido.

Configuración del encabezado de texto Luego cambie la configuración del texto del encabezado.

Título de la fuente: Montserrat
Título Fuente de peso: Luz
TOMA DE TEXTO DE COLOR: # 3F46FF
Encabezado de texto de tamaño: 3.8VW (escritorio), 6.5VW (tableta), 40 px (teléfono)
Altura de la línea de dirección: 0.8em
Animación y agregue una animación a este módulo.

Estilo de animación: diapositiva
Dirección de la animación: izquierda
Retraso de animación: 600 ms
Intensidad de animación: 10%
Agregue la estructura de la columna de la fila # 2 Continuar agregando otra fila a la sección utilizando la siguiente estructura de columnas:

Agregue los módulos restantes Agregue los otros módulos que desea mostrar en esta nueva fila y modifíquelos de acuerdo con sus necesidades. Ejemplo de registro no. 2: divisores que chocan

¡Agregue la sección especializada, pasamos al siguiente ejemplo! Agregue una nueva sección de especialidad utilizando la siguiente estructura:

Dimensión sin agregar filas o módulos, abra la configuración de la sección y active el “Haga esta sección con el ancho completo”.

Haga esta sección ancho completo: sí

Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:
Espacio abrir la configuración de la fila y cambiar la configuración de llenado personalizada.

Revestimiento superior: 44 PX

Finamiento inferior: 0 PX
Agregue un módulo de texto Agregar contenido y luego, agregue un módulo de texto en una fila con un cierto contenido de su elección.
Configuración Encabezado de texto Vaya a la pestaña Diseño y modifique la configuración del texto del encabezado.

Título de la fuente: Montserrat

Título Fuente de peso: Luz
Encabezado de texto de tamaño: 70 PX (escritorio), 50 px (tableta), 40 px (teléfono)
Altura de la línea de dirección: 0.8em
Agregue la estructura de la columna de la fila # 2 Continuar agregando otra fila utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y modifique la configuración de tamaño.

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 53% (escritorio), 100% (tableta y teléfono)
Difundir el cambio y los valores de llenado personalizados.
Revestimiento superior: 50 px

Finamiento inferior: 0 PX
Agregue un módulo Divisor a la visibilidad de la columna 1 después de haber terminado de cambiar la configuración de las filas, continúe y agregue un módulo divisor en la primera columna y asegúrese de que el divisor aparezca activando la opción “Divisor Pantising”.
Color luego cambie el color del separador.

Color divisor: # 3f46ff
Estilos y cambiar el estilo divisor en la configuración de los estilos.

Estilo divisor: doble
Agrandar el tamaño y el peso del separador de peso en la configuración del tamaño.

Peso del divisor: 8 PX
Animación Eventualmente, agregue una animación al módulo divisor.

Estilo de animación: diapositiva
Dirección de la animación: correcto

Clone el módulo divisor y la ubicación en la columna 2 después de haber terminado de cambiar la configuración del módulo divisor, continúe y clone el módulo. Coloque el duplicado en la segunda columna de la fila.
Cambie la animación para crear un efecto de colisión, cambie la dirección del módulo del divisor duplicada.
Estilo de animación: diapositiva

Dirección de la animación: izquierda

Agregue la estructura de la columna de la fila # 3 Continuar agregando otra fila utilizando la siguiente estructura de columna:
Agregue los módulos restantes y agregue cuántos módulos desea completar el diseño de la sección.
Recrear Ejemplo # 3: Grid de colisión

¡Agregue una nueva sección, vamos al siguiente y último ejemplo! Agregue una sección normal y abra su configuración. Acceda a la configuración de espaciado Agregue algunos valores de llenado personalizados:

Revestimiento superior: 300 px

Finamiento inferior: 200 PX

Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:
Agregue el módulo de imagen a la columna cargar la superposición de las imágenes en el formulario Guardar la siguiente imagen superposición en el escritorio haciendo clic: Después de haber guardado la imagen superpuesta, regrese a su sitio DIV y agregue un módulo de imagen en una fila. Cargue el archivo de imagen superpuesto en la forma que puede encontrar en la carpeta de descarga.
Fondo de gradiente Luego, agregue un fondo de gradiente al modo.

Color 1: # AA2BFF

Color 2: # 09f7eb

Alineación Cambiar la alineación de la imagen.

Alineación de imágenes: centro
Dimensión y active la opción “Ancho completo” en la configuración de tamaño.
Fuerza el ancho completo: si

Espacio agregue un margen personalizado al modo.
Margen izquierdo: 200 PX

Margen derecho: 200 PX
La animación eventualmente agrega una animación al modo.


Estilo de animación: Zoom
Director de Animación: Centro
Duración de la animación: 3000 ms

Animación de intensidad: 100%
Agregue la estructura de la fila # 2 de la columna por segundo. Use la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y realice algunos cambios en la configuración del tamaño.
Use ancho personalizado: sí
Unidad: PX

Ancho personalizado: 944 PX

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Agregue los módulos de la propaganda a la columna 1 Agregar contenido Continuar agregando un módulo de propaganda a la primera columna. Ingrese un contenido de su elección.
El icono selecciona un icono más.
Color de fondo y agregue un color de fondo al modo.
Color de fondo: RGBA (255.255.255.0.83)

La configuración del icono va a la pestaña de diseño y cambia la configuración del icono.

Icono de color: # 000000

Colocación de iconos: Apoye el icono del tamaño de la fuente: Sí
Icono de tamaño de fuente: 73 PX

Configuración de texto de título Modificar y configuración para el texto del título.
Fuente del título: Open Sans
Fuente de peso del título: semi audaz
Alineación del texto del título: Centro
Título Tamaño del texto: 15 PX

Cartas de título de espacio: -1 PX
Altura de la línea de título: 1.8em
Dimensión y reducir el ancho de contenido en la configuración del tamaño.
Ancho de contenido: 183 PX
Espacio agregaremos un forro personalizado desde arriba y abajo.
Revestimiento superior: 50 px
Revestimiento inferior: 50 PX

Box Shadow Continúa dándole al módulo de la propaganda una sombra de caja sutil.
Poder de poco claro de la sombra de la caja: 80 px

Color de la sombra: RGBA (0.0,0,0,3)
Transiciones y aumentar la duración de la transición en la pestaña avanzada.
Duración de la transición: 600 ms

Módulos de propaganda clon 8 veces y coloque 3 duplicados en cada columna restante ahora, después de haber terminado de cambiar el primer módulo de blurbs, puede continuar el clon 8 veces. Coloque tres duplicados en la segunda columna y tres en la tercera. En la siguiente parte de este tutorial, haremos cambios únicos en cada uno de los módulos de propaganda. Para esto, seguiremos el siguiente número:
Cambie el módulo de espaciado de la propaganda # 1 Abra el primer módulo de blurbs y agregue un margen superior negativo.
Margen superior: -340px (escritorio), 0px (tableta y teléfono)

La distancia al mouse cambia los valores de margen al pasar con el mouse.
Margen superior: -380px

Margen inferior: 40 px

Margen izquierdo: -40px
Margen derecho: 40 PX

Las esquinas redondeadas continúan agregando “30px” a la esquina superior izquierda del módulo.
Animación y agregar una animación.
Estilo de animación: diapositiva
Dirección de la animación: izquierda
Retraso de animación: 200 msmodify El módulo de la propaganda # 2 Color de fondo Abra el segundo módulo de blurb y cambie el color de fondo.

Color de fondo: RGBA (255.255.255.0.93)

El espacio continúa agregando un margen superior negativo al modo.
Margen superior: -340px (escritorio), 0px (tableta y teléfono)
La distancia al mouse cambia estos valores del margen en la salida.
Margen superior: -380px

Margen inferior: 40 px
Animación y agregue una animación al modo.

Estilo de animación: diapositiva
Dirección de la animación: izquierda

Retraso de animación: 400 ms
Cambie el módulo de espaciado de la propaganda # 3, pasamos al tercer módulo de propaganda. Agregue un margen superior negativo.
Margen superior: -340px (escritorio), 0px (tableta y teléfono)

La distancia con el mouse cambia los valores de margen al cursor.
Margen superior: -380px
Margen inferior: 40 px
Margen izquierdo: 40 PX

Margen derecho: -40px
Las esquinas redondeadas agregan “30px” y a la esquina superior derecha del módulo.

Animación y agregar una animación.
Estilo de animación: diapositiva
Dirección de la animación: izquierda
Retraso de animación: 600 ms
Cambie el módulo de color de fondo de la propaganda # 4, pasamos al cuarto módulo. Abra la configuración y cambie el color de fondo.

Color de fondo: RGBA (255.255.255.0.93)

La distancia con el mouse agrega algunos valores del margen de viaje adicional.
Margen izquierdo: -40px
Margen derecho: 40 PX
Animación y agregar una animación.

Estilo de animación: Fade
Retraso de animación: 800 ms

Cambie el módulo de animación de la propaganda # 5, pasamos al quinto módulo. Lo único que tendrá que hacer aquí es agregar una animación.
Estilo de animación: Fade
Animación de retraso: 1000 ms

Cambie el control de color de fondo de la propaganda # 6, abriendo el sexto módulo y cambiando el color de fondo. Fondo: RGBA (255.255.255.0.93)
Distancia con el mouse cambia los valores de espaciado al cursor.
Margen izquierdo: 40 PX

Margen derecho: -40px
Animación y agregar una animación.
Estilo de animación: Fade

Retraso de animación: 1200 ms
Cambie el módulo de la propaganda # 7 La distancia con el mouse nos movemos al séptimo módulo. Agregue algunos valores del margen de viaje a la configuración de espaciado.

Margen superior: 40 PX
Margen izquierdo: -40px
Margen derecho: 40 PX

Las esquinas redondeadas continúan agregando “30 px” de radio de borde a la esquina inferior izquierda del módulo.
Animación y agregar una animación.
Estilo de animación: diapositiva

Dirección de la animación: correcto
Retraso de animación: 1400 ms
Cambie el módulo de color de fondo de la propaganda # 8 Continuar abriendo el octavo módulo y cambiando el color de fondo.
Color de fondo: RGBA (255.255.255.0.93)

La distancia con el mouse agrega un cierto margen personalizado al pasar con el mouse al siguiente módulo.

Margen superior: 40 PX
La animación también agrega una animación a este módulo Blur.
Estilo de animación: diapositiva
Dirección de la animación: correcto

Retraso de animación: 1600 ms
¡Cambie el módulo de distancia de la propaganda # 9 con el mouse al módulo nuevo y último! Vaya a la configuración del espacio y agregue algunos valores de margen de viaje personalizados.

Margen superior: 40 PX
Margen izquierdo: 40 PX

Margen derecho: -40px
Las esquinas redondeadas agregan “30 PX” del radio del borde y a la esquina inferior derecha.
Animación y agregar una animación.
Estilo de animación: diapositiva

Dirección de la animación: correcto
Retraso de animación: 1800 ms
Agregue un borde inferior negativo al módulo de imagen en la fila no. 1 Ahora, para colisionar el círculo que creamos en la primera parte de este ejemplo y la cuadrícula, daremos el módulo de imagen (que contiene la superposición de la imagen en la forma) un margen inferior negativo.
Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado obtenido. Ejemplo no. 1: divisores que chocan

Ejemplo no. 2: texto en colisión

Ejemplo # 3: Grid de colisión
altísimo
Los pensamientos finales agregan animaciones a sus páginas pueden ayudarlo a crear más interacciones entre los visitantes y. Por supuesto, solo puede usar la configuración de animación que tiene en Visual Builder, pero puede ir un paso más allá aplicando animaciones que chocan con los elementos de diseño Eso te ayudará a obtener resultados sorprendentes. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.