Cómo combinar animaciones y paralaje en Divi para diseños únicos
Publicado: 2019-08-07Ya sea que estemos preparando una comida o diseñando un sitio web, los ingredientes por sí solos no garantizarán un plato sabroso o un sitio hermoso. Es lo bien que combinamos esos elementos lo que marca la diferencia. En este tutorial, le mostraré cómo combinar la animación y el paralaje de imágenes de una manera que nunca antes había considerado. Si aún no lo sabe, la animación es una función Divi incorporada que se puede agregar a cualquier elemento Divi al cargar la página. Parallax también es una opción Divi que le permite agregar un movimiento único a sus imágenes de fondo en el desplazamiento.
Hoy, vamos a utilizar la configuración de diseño incorporada de Divi para combinar animaciones y paralaje en todo tipo de formas creativas. La combinación funciona en conjunto de manera bastante mágica para crear un hermoso diseño de imágenes de paralaje animadas que se ven increíbles a medida que se desplaza hacia abajo en la página.
¡Empecemos!
Vistazo
Descarga el diseño GRATIS
Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, necesitará lo siguiente:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
- Imágenes que se utilizarán para contenido simulado. Puede encontrar las imágenes utilizadas para este tutorial en Life Coach Divi Layout Pack.
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
La idea básica
La idea básica detrás de este concepto de diseño se centra en el uso de paralaje CSS en imágenes de fondo. Debido a la forma en que funciona el paralaje de CSS, la imagen de paralaje permanecerá fija y llenará automáticamente la ventana del navegador sin importar el tamaño del elemento que la usa. La naturaleza fija de la imagen le permite usar la misma imagen de paralaje en múltiples elementos en Divi y luego mover esos elementos usando animación. Cuando la animación se estabilice, las imágenes de fondo de paralaje utilizadas coincidirán y funcionarán como se esperaba al desplazarse hacia abajo en la página.
Parte 1: Creación de la animación Divi y el diseño de Parallax (Versión 1)
Cree una nueva sección con una fila de dos columnas (1/2 1/2).
Antes de agregar nuestros módulos, hagamos algunos ajustes en la sección y la fila.
Actualizar la configuración de sección y fila
Primero, abra la configuración de la sección y saque el relleno predeterminado de la siguiente manera:
Relleno: 0px arriba, 0px abajo
Luego abra la configuración de la fila y dele a la fila una imagen de fondo de paralaje.
Imagen de fondo: [cargar imagen]
Usar efecto de paralaje: SÍ
Método de paralaje: CSS
Aquí, el método de paralaje debe establecerse en CSS para que el diseño funcione.
Ancho: 100%
Ancho máximo: 100%
Acolchado: 10vw arriba, 10vw a la izquierda, 10vw a la derecha
Agregue el módulo de texto con el fondo de Parallax a juego
Ahora estamos listos para comenzar a agregar nuestros módulos de texto al diseño. El primer módulo de texto es la clave de este diseño. Al aplicar exactamente la misma imagen de fondo y paralaje css al módulo de texto, podemos ser creativos con la animación para un efecto completamente único.
Continúe y agregue un nuevo módulo de texto a la columna 1.
Luego actualice la configuración del módulo de texto de la siguiente manera:
Contenido del cuerpo:
<p>Hi!<br>I'm Jane...</p> <a href="#">about me</a>
Luego, asigne al módulo de texto la misma imagen de fondo de paralaje css que agregó a la fila.
Imagen de fondo: [cargar imagen]
Usar efecto de paralaje: SÍ
Método de paralaje: CSS
Fuente de texto: Fira Sans
Peso de la fuente del texto: Ligero
Color del texto del texto: #ffffff
Tamaño del texto del texto: 70px
Altura de la línea de texto: 1em
Estilo de fuente de enlace: subrayado (U)
Color del texto del enlace: #ffffff (predeterminado), # 881e67 (desplazarse)
Tamaño del texto del enlace: 30px
Espaciado de letras de enlace: 2px
Relleno: 20% arriba, 20% abajo, 10% izquierda, 10% derecha
Ancho del borde: 20px
Color del borde: #ffffff
Luego agregando la siguiente animación al módulo de texto:
Estilo de animación: diapositiva
Dirección de animación: Derecha
Duración de la animación: 1500ms
Intensidad de la animación: 80%
Opacidad inicial de la animación: 20%
Veamos el efecto hasta ahora ...
Observe cómo la imagen de fondo del módulo de texto animado descansa en la ubicación coincidente del fondo de la fila. Esto se debe a que ambos comparten la misma imagen de fondo con el efecto de paralaje CSS.
Adición del segundo módulo de texto con una imagen de fondo de paralaje real
En este punto, estamos listos para agregar nuestro próximo módulo de texto. El siguiente tendrá una imagen de fondo diferente usando el verdadero efecto de paralaje. También le daremos algo de animación.
Agregue un nuevo módulo de texto a la columna 2.
Luego actualice el contenido del cuerpo con la palabra "mi blog".
Luego agregue una imagen de fondo con el verdadero método de paralaje.
Imagen de fondo: [cargar imagen]
Usar efecto de paralaje: SÍ
Método Parallax: True Parallax
Fuente de texto: Fira Mono
Estilo de fuente de texto: TT
Alineación del texto del texto: centro
Color del texto del texto: #ffffff
Espaciado de letras de texto: 10px
Ancho: 320px
Ancho máximo: 320px
Alineación del módulo: centro
Margen: (escritorio): -5vw arriba, 4vw abajo
Margen (tableta y teléfono): 3vw superior
Relleno: 70px superior, 70px inferior
Ancho del borde: 20px
Color del borde: #ffffff
Estilo de animación: diapositiva
Dirección de la animación: abajo
Retraso de animación: 200 ms
Creación del tercer módulo de texto con una nueva imagen de fondo de Parallax
Para crear el tercer módulo de texto, duplique el módulo de texto que acaba de crear en la columna 2.
Entonces vamos a mantener la imagen de fondo igual pero vamos a actualizar el efecto de paralaje con el método de paralaje de CSS.
Ancho: 240px
Ancho máximo: 240px
Alineación del módulo: izquierda
Margen: 0px inferior
Relleno: 170 px arriba, 170 px abajo, 95 px a la izquierda, 95 px a la derecha
El ancho personalizado y el relleno derecho e izquierdo se utilizan para crear la visualización de texto vertical que va bien con el diseño del módulo más largo.
Luego actualice la dirección de la animación hacia arriba en lugar de hacia abajo.
Dirección de animación: ARRIBA
Resultado final
Ahora veamos el resultado final.
Parte 2: Creación del diseño de animación y paralaje (versión 2)
Este próximo diseño agregará una animación única al cargar la imagen de fondo de paralaje para la fila después de la animación inicial de los módulos. Para hacer esto, necesitaremos usar una fila separada estrictamente para la imagen de fondo de paralaje CSS que se moverá detrás del contenido. Y dado que tendremos el fondo de nuestra sección expuesto inicialmente, podemos agregar un color de fondo personalizado para nuestro contenido antes de la animación de la fila.
He aquí cómo hacerlo.
Primero, implemente el modo de vista de estructura alámbrica. Luego, duplique la fila que contiene sus módulos de texto. Ahora tendrás dos filas idénticas. A continuación, elimine los módulos de texto dentro de la fila superior. Todo lo que realmente queríamos hacer era adelantarnos en el diseño de nuestra fila superior.
A continuación, actualice la configuración de la fila superior de la siguiente manera:
Altura: 900 px (escritorio), 2000 px (tableta y teléfono)
Relleno: 0px arriba, 0px abajo
Estilo de animación: diapositiva
Dirección de animación: Derecha
Duración de la animación: 1250ms
Retraso de animación: 1800 ms
Le estamos dando a la fila una altura establecida porque la fila vacía no tendrá altura por defecto. Por lo tanto, debe asegurarse de que la altura de la fila sea suficiente para cubrir el contenido de su segunda fila con el contenido. También le dimos a la fila una animación con un retraso para que se deslice detrás del contenido después de que aparezcan los módulos de texto.
Superposición de las dos filas
Ahora todo lo que tenemos que hacer es subir la fila inferior usando un margen negativo para que se superponga a la fila superior con nuestra animación de fondo.
Abra la configuración de la fila inferior y actualice el margen de la siguiente manera:
Margen: -900px superior (escritorio), -2000px (tableta y teléfono)
Luego saque la imagen de fondo con el método de paralaje css para la fila, ya que usaremos la imagen de fondo de la fila superior en su lugar.
Aquí está el diseño hasta ahora. Observe la animación de fondo retrasada en la primera fila y cómo el fondo de paralaje del módulo de texto en la columna 1 coincide perfectamente con él.
Agregar un color de fondo de sección
Para dar a los módulos de texto un color de fondo inicial antes de la animación de la fila, puede dar un color de fondo a la sección.
Abra la configuración de la sección y agregue lo siguiente:
Color de degradado de fondo a la izquierda: rgba (136,30,103,0.61)
Gradiente de fondo Color derecho: # 881e67
Tipo de degradado: radial
Resultado final
Ahora veamos el resultado final.
Combinación de animación y modo de fusión opcional
También puede ser aún más creativo agregando un modo de fusión a la segunda fila y agregando una animación de zoom que funcionará en conjunto con las animaciones del módulo.
Modo de fusión: luminosidad
Estilo de animación: Zoom
Aquí esta el resultado final.
Y así es como se ve en el móvil.
Pensamientos finales
Espero que haya aprendido algunas cosas a lo largo del camino mientras exploramos algunas formas únicas de combinar la animación y las imágenes de paralaje. Los resultados son definitivamente únicos y estoy seguro de que puede modificar fácilmente esta configuración para crear otras innumerables combinaciones que se verán impresionantes en su próximo proyecto.
Espero tener noticias tuyas en los comentarios.
¡Salud!