Cómo animar imágenes de fondo de Parallax con los efectos de desplazamiento de Divi
Publicado: 2020-03-05La combinación de efectos de desplazamiento con imágenes de fondo de paralaje puede crear un diseño bastante mágico para sus visitantes. Dado que el efecto de paralaje ya pone la imagen en movimiento a medida que el usuario se desplaza hacia abajo en la página, agregar efectos de desplazamiento adicionales (como movimiento horizontal y rotación) realmente puede diferenciar el diseño y abrir puertas para diseños más creativos.
En este tutorial, veremos cómo animar imágenes de fondo de paralaje utilizando los efectos de desplazamiento de Divi. Usaremos la misma imagen de fondo en varios módulos de texto para diseñar un diseño único para mostrar un bloque corto de texto.
Empecemos.
Vistazo
Descargue el diseño de imagen de fondo animado de Parallax GRATIS
Para poner sus manos en el diseño 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, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Construir desde cero".
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Creación de imágenes de fondo animadas de Parallax con los efectos de desplazamiento de Divi
Agregar la columna
Para empezar, cree una fila de una columna.
Crear el módulo de texto
Luego agregue un módulo de texto a la columna.
Contenido del texto
Agregue la letra "p" al contenido del cuerpo.
Agregar imagen de fondo de Parallax al módulo de texto
A continuación, agregue una imagen de fondo de paralaje al módulo de texto de la siguiente manera:
- Imagen de fondo: insertar imagen
- Usar efecto de paralaje: SÍ
- Método de paralaje: CSS
Diseñando el texto
En la pestaña de diseño, actualice lo siguiente:
- Fuente de texto: Montserrat
- Estilo de fuente de texto: TT
- Color del texto del texto: #ffffff
- Texto Tamaño del texto: 100 px (escritorio), 70 px (teléfono)
- Espaciado de letras de texto: 5px (teléfono)
- Altura de la línea de texto: 1em
- Alineación de texto: centro
- Relleno: 250 píxeles en la parte superior, 250 píxeles en la parte inferior
El acolchado es lo que crea la altura necesaria para exponer la imagen de fondo de paralaje.
Configuración de filas
Ahora que nuestro módulo de texto está listo, abra la configuración de la fila y actualice lo siguiente:
- Usar ancho de canalón personalizado: SÍ
- Ancho de la canaleta: 1
- Ancho: 100%
Configuración de la columna 1
Luego haga clic para abrir la configuración de la columna.
En la pestaña Avanzado, actualice los siguientes efectos de desplazamiento:
En la pestaña de efectos de movimiento horizontal ...
- Habilitar horizontal: SÍ
- Desplazamiento inicial: -2 (al 0% de la ventana gráfica)
- Desplazamiento medio: 0 (al 40% -60%)
- Compensación final: -2 (al 100%)
En la pestaña Efectos giratorios ...
- Habilitar rotación: SÍ
- Rotación inicial: 20 grados (al 0% de la ventana gráfica)
- Rotación media: 0 grados (al 40% -60%)
- Rotación final: -20 grados (al 100%)
Creación de la columna 2
Aunque comenzamos con un diseño de una columna, vamos a crear un total de 5 columnas. Es más fácil duplicar la columna con todo su contenido y configuraciones para crear las siguientes cuatro necesarias para el diseño.
Duplique toda la primera columna (con el módulo de texto) para crear la segunda columna.
Actualización de los efectos de desplazamiento de la columna 2
Luego actualice los efectos de desplazamiento para la columna 2 de la siguiente manera:
En la pestaña Efectos giratorios ...
- Rotación inicial: -20 grados
- Rotación final: 20 grados
Creación de la columna 3
Para crear la columna 3, duplique la columna 2.
Actualización de los efectos de desplazamiento de la columna 3
Luego actualice la configuración de la columna 3 de la siguiente manera:
En la pestaña Efectos de movimiento horizontal ...
- Habilitar movimiento horizontal: NO
En la pestaña Efecto giratorio ...
- Rotación inicial: 20 grados
- Rotación final: 10 grados
Creación de la columna 4
Para crear la columna 4, duplique la columna 2 y luego arrástrela hacia la parte inferior.
Actualización de los efectos de desplazamiento de la columna 4
Luego abra la configuración de la columna 4 y actualice lo siguiente:
En la pestaña de efectos de movimiento horizontal ...
- Desplazamiento inicial: 2
- Desplazamiento final: 2
En la pestaña Efectos giratorios ...
- Rotación inicial: -15 grados
- Rotación final: 20 grados
Creación de la columna 5
Finalmente, para crear la columna 5, duplique la columna 4.
Actualización de los efectos de desplazamiento de la columna 5
Luego actualice la configuración de la columna 5 de la siguiente manera:
En la pestaña Efectos giratorios ...
- Rotación inicial: 15 grados
- Rotación final: -15 grados
Actualización de las letras del módulo de texto
A continuación, utilice la opción de texto en línea para cambiar las letras de cada columna para que deletreen colectivamente la palabra "poder".
Actualización del diseño del módulo de texto intermedio
Abra la configuración del módulo de texto en la columna 3 y actualice lo siguiente:
- Fuente del texto: Montserrat Subrayada
- Color del texto del texto: # e0e722
- Tamaño del texto del texto: 150 px (escritorio)
- Altura de la línea de texto: 100px
Actualizar el contenido del primer módulo de texto para dispositivos móviles
Para mostrar un solo módulo de texto en el móvil, necesitamos actualizar el módulo de texto en la columna 1 con el siguiente contenido en la pantalla de la tableta y el teléfono:
Contenido del cuerpo en la tableta y el teléfono:
<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>
Actualizar la configuración de la columna 1
A continuación, abra la configuración de la columna 1 y actualice lo siguiente:
- Esquinas redondeadas (escritorio): 100% arriba a la izquierda
- Esquinas redondeadas (tableta y teléfono): 40% arriba a la izquierda, 40% abajo a la derecha
En la pestaña avanzada, agregue el siguiente CSS personalizado a la pantalla de la tableta del elemento principal:
width: 100% !important;
Esto asegurará que la columna abarque todo el ancho de la fila en la pantalla de la tableta y el teléfono.
Ocultar el resto de las columnas en la pantalla de la tableta y el teléfono
Ahora que la columna 1 abarcará todo el ancho de la fila en la tableta y el teléfono, podemos ocultar / deshabilitar el resto de las columnas en la tableta y el teléfono. Para hacer esto, abra la configuración de las columnas 2-5 y desactive la visibilidad de cada una de las columnas en el teléfono y la tableta.
Actualizar la configuración de la columna 5
Luego abra la configuración de la columna 5 y agregue una esquina redondeada complementaria de la siguiente manera:
- Esquinas redondeadas (escritorio): 100% inferior derecha
Agregar diseño de fondo a la sección
Para terminar el diseño, actualice la configuración de la sección con un diseño de fondo de la siguiente manera:
- Color de fondo: # e0e722
- Estilo de divisor superior: ver captura de pantalla
- Color del divisor superior: # 222222
- Altura del divisor superior: 650 px (escritorio), 500 px (tableta y teléfono)
- Estilo del divisor inferior: ver captura de pantalla
- Color del divisor inferior: # 222222
- Altura del divisor inferior: 500 px (escritorio), 400 px (tableta y teléfono)
Resultado final
Hre es el diseño final en el escritorio.
Y aquí está el diseño de respaldo en la pantalla de la tableta y el teléfono.
Pensamientos finales
Las imágenes de fondo de paralaje se combinan con efectos de desplazamiento de formas verdaderamente mágicas. La única desventaja de usar imágenes de fondo de paralaje es la falta de soporte para dispositivos móviles, pero con la configuración receptiva que proporciona Divi, podemos crear fácilmente una alternativa. Espero que este elegante diseño le añada algo de inspiración a su día.
Espero tener noticias tuyas en los comentarios.
¡Salud!