La 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 con los efectos de desplazamiento de Divi. Utilizaremos la misma imagen de fondo en múltiples módulos de texto para diseñar un diseño único para mostrar un bloque corto de texto.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Vistazo

imágenes de fondo de paralaje animado en desplazamiento

Lo que necesitas para empezar

pestañas de esquina expandibles

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Divi Theme .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
  3. Elija la opción «Construir desde cero».

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Crear las imágenes de fondo animadas de paralaje con los efectos de desplazamiento de Divi

Agregar la columna

Para comenzar, cree una fila de una columna.

imágenes de fondo de paralaje animado en desplazamiento

Crear el módulo de texto

Luego agregue un módulo de texto a la columna.

imágenes de fondo de paralaje animado en desplazamiento

Contenido del texto

Agregue la letra «p» al contenido del cuerpo.

imágenes de fondo de paralaje animado en desplazamiento

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

imágenes de fondo de paralaje animado en desplazamiento

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)
  • Espacio entre letras de texto: 5 px (teléfono)
  • Altura de la línea de texto: 1em
  • Alineación de texto: centro
  • Acolchado: 250px arriba, 250px abajo

El relleno es lo que crea la altura necesaria para exponer la imagen de fondo de paralaje.

imágenes de fondo de paralaje animado en desplazamiento

Configuración de fila

Ahora que nuestro módulo de texto está listo, abra la configuración de la fila y actualice lo siguiente:

  • Usar ancho de canal personalizado: SÍ
  • Ancho de canal: 1
  • Ancho: 100%

imágenes de fondo de paralaje animado en desplazamiento

Configuración de columna 1

Luego haga clic para abrir la configuración de la columna.

imágenes de fondo de paralaje animado en desplazamiento

En la pestaña Avanzado, actualice los siguientes efectos de desplazamiento:

Debajo de la pestaña Efectos de movimiento horizontal …

  • Habilitar horizontal: SÍ
  • Compensación inicial: -2 (a 0% de ventana gráfica)
  • Desfase medio: 0 (a 40% -60%)
  • Compensación de finalización: -2 (al 100%)

En la pestaña Efectos giratorios …

  • Habilitar rotación: SÍ
  • Rotación de inicio: 20deg (con 0% de ventana gráfica)
  • Rotación media: 0 grados (al 40% -60%)
  • Rotación final: -20 grados (al 100%)

imágenes de fondo de paralaje animado en desplazamiento

Crear columna 2

Aunque comenzamos con un diseño de una columna, vamos a crear un total de 5 columnas. Es simplemente más fácil duplicar la columna con todo su contenido y configuraciones para crear los siguientes cuatro necesarios para el diseño.

Duplique toda la primera columna (con el módulo de texto) para crear la segunda columna.

imágenes de fondo de paralaje animado en desplazamiento

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 de inicio: -20deg
  • Rotación final: 20 grados

imágenes de fondo de paralaje animado en desplazamiento

Crear columna 3

Para crear la columna 3, duplique la columna 2.

imágenes de fondo de paralaje animado en desplazamiento

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

Debajo de la pestaña Efecto giratorio …

  • Rotación de inicio: 20deg
  • Rotación final: 10 grados

imágenes de fondo de paralaje animado en desplazamiento

Crear columna 4

Para crear la columna 4, duplique la columna 2 y luego arrástrela hacia abajo.

imágenes de fondo de paralaje animado en desplazamiento

Actualización de los efectos de desplazamiento de la columna 4

Luego abra la configuración de la columna 4 y actualice lo siguiente:

Debajo de la pestaña Efectos de movimiento horizontal …

  • Compensación de inicio: 2
  • Compensación de finalización: 2

En la pestaña Efectos giratorios …

  • Rotación inicial: -15 grados
  • Rotación final: 20 grados

imágenes de fondo de paralaje animado en desplazamiento

Crear columna 5

Finalmente, para crear la columna 5, duplique la columna 4.

imágenes de fondo de paralaje animado en desplazamiento

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

imágenes de fondo de paralaje animado en desplazamiento

Actualización de las letras del módulo de texto

Luego, use la opción de texto en línea para cambiar las letras en cada columna para que deletreen colectivamente la palabra «poder».

imágenes de fondo de paralaje animado en desplazamiento

Actualización del diseño del módulo de texto medio

Abra la configuración del módulo de texto en la columna 3 y actualice lo siguiente:

  • Fuente de texto: Montserrat Subrayada
  • Color del texto del texto: # e0e722
  • Texto Tamaño del texto: 150 px (escritorio)
  • Altura de la línea de texto: 100 px

imágenes de fondo de paralaje animado en desplazamiento

Actualizar el primer contenido del 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 tableta y teléfono:

01
<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>

imágenes de fondo de paralaje animado en desplazamiento

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% superior izquierda
  • Esquinas redondeadas (tableta y teléfono): 40% arriba a la izquierda, 40% abajo a la derecha

imágenes de fondo de paralaje animado en desplazamiento

En la pestaña avanzada, agregue el siguiente CSS personalizado a la pantalla de la tableta del elemento principal:

01
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.

imágenes de fondo de paralaje animado en desplazamiento

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.

imágenes de fondo de paralaje animado en desplazamiento

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% abajo a la derecha

imágenes de fondo de paralaje animado en desplazamiento

Agregar diseño de fondo a la sección

Para finalizar 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

imágenes de fondo de paralaje animado en desplazamiento

  • Estilo divisor superior: ver captura de pantalla
  • Color del divisor superior: # 222222
  • Altura del divisor superior: 650 px (escritorio), 500 px (tableta y teléfono)

imágenes de fondo de paralaje animado en desplazamiento

  • 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)

imágenes de fondo de paralaje animado en desplazamiento

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!