Cómo crear una animación de desplazamiento de fondo de texto colorido con Divi

La creación de una animación de desplazamiento de fondo de texto es una forma única de agregar texturas coloridas en movimiento al texto de su sitio web a medida que el usuario se desplaza hacia abajo en la página. Con Divi , el proceso es sorprendentemente fácil una vez que aprendes algunas técnicas clave.

En este tutorial, vamos a usar nada más que el poder de la configuración integrada de Divi para crear 3 diseños únicos que presentan una animación de desplazamiento de fondo de texto colorido. Incluso le mostraremos cómo crear una versión oscura de cada diseño para una apariencia y sensación completamente nuevas.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido a los diseños que construiremos hoy.

Descargue los diseños de animación de desplazamiento de fondo de texto GRATIS

Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo JSON a Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo has hecho, instala y activa el tema Divi .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
  3. Elija la opción «Construir desde cero».

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

Diseño 1: degradado de fondo de texto con efecto de desplazamiento horizontal

Este primer diseño contará con un efecto de desplazamiento horizontal que anima un colorido módulo divisor detrás de un módulo de texto con el filtro de pantalla.

Añadir columna

Para comenzar, agregue una fila de una columna a la sección predeterminada.

Agregar módulo de texto

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

Contenido

Para el contenido de la columna, pegue el siguiente código HTML en el cuadro de contenido:

Diseño de texto

Luego actualice el diseño del texto de la siguiente manera:

  • Color de fondo: #ffffff
  • Estilo de fuente de texto: TT
  • Texto Color del texto: #000000
  • Texto Tamaño del texto: 100 px (escritorio), 40 px (teléfono)
  • Espaciado entre letras de texto: 0,15 em
  • Altura de línea de texto: 1em
  • Alineación de texto: Centro

  • Fuente del encabezado: Merriweather
  • Peso de la fuente del encabezado: Negrita
  • Estilo de fuente de título: TT
  • Alineación del texto del título: Centro
  • Color del texto del encabezado: #000000
  • Tamaño del texto del encabezado: 200 px (escritorio), 80 px (teléfono)
  • Espaciado entre letras de encabezado: 0,15 em
  • Altura de la línea de encabezado: 1em

Relleno y filtro

Ahora necesitamos agregar un poco de relleno y un filtro de pantalla al módulo de texto. El filtro es necesario para que este diseño funcione porque es lo que permite que los colores/módulos de fondo se muestren detrás del texto.

Para agregar el relleno y el filtro, actualice lo siguiente:

  • relleno: 15px arriba, 20px abajo
  • Modo de fusión: Pantalla

Nota: el modo de combinación de pantalla funciona mejor con texto negro sobre un fondo blanco. Si quisiéramos usar texto blanco sobre un fondo negro, usaríamos el modo de mezcla Multiplicar.

Divisor superior e inferior

Una vez que nuestro módulo de texto esté terminado, agreguemos un par de divisores (arriba y uno debajo del módulo de texto) para un elemento de diseño adicional.

Agregar divisor inferior

Agregue un nuevo módulo divisor debajo del módulo de texto.

Configuración del divisor superior

Abra la configuración del divisor y seleccione NO para mostrar el divisor.

Luego actualice el fondo y dele al divisor el mismo modo de fusión que el módulo de texto de la siguiente manera:

  • Fondo degradado Color izquierdo: #000000
  • Fondo degradado Color derecho: #ffffff
  • Dirección del gradiente: 90 grados
  • Posición inicial: 48%
  • Posición final: 0%
  • Modo de fusión: Pantalla

Luego actualice la altura del divisor en la pantalla del teléfono de la siguiente manera:

  • Altura: 15px (teléfono)

Agregar divisor superior

Para crear el divisor superior, duplique el divisor inferior anterior y arrástrelo sobre el módulo de texto usando el cuadro de vista de capas .

Luego invierta los colores en el fondo degradado.

Actualizar configuración de fila

Una vez que nuestros divisores superior e inferior estén en su lugar, actualice la configuración de la fila de la siguiente manera:

  • Ancho de canalón: 1 (para eliminar los márgenes inferiores entre módulos)
  • Ancho máximo: 600 px (para mantener un diseño uniforme en el escritorio y la tableta)
  • Alineación de filas: Centro
  • Relleno: 0px arriba, 0px abajo
  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

Crear divisor para el color de fondo del texto animado

El elemento final de este primer diseño es el divisor que usaremos para animar el color de fondo del texto en el desplazamiento. Para hacer esto, agregue un nuevo módulo divisor debajo del divisor inferior.

Luego seleccione NO para mostrar el divisor.

Configuración del divisor de fondo

Actualice el divisor con un fondo degradado de la siguiente manera:

  • Fondo degradado Color izquierdo: #e02b20
  • Fondo degradado Color derecho: #8300e9
  • Dirección del gradiente: 90 grados
  • Posición inicial: 30%
  • Posición final: 70%

Queremos establecer la altura del divisor para que sea lo suficientemente alto como para colorear todo nuestro texto en el módulo de texto y los divisores superior e inferior. Para este diseño, establezca la altura en 400 px.

  • Altura: 400px

Luego asigne al divisor una posición absoluta para colocarlo directamente encima de los otros módulos. Use el Índice Z para hacer que el divisor se coloque detrás de los otros módulos.

  • Posición: Absoluta
  • Índice Z: -1

Efectos de desplazamiento del divisor de fondo

Con el divisor en posición, todo lo que tenemos que hacer es mover el divisor detrás del texto usando los efectos de desplazamiento de Divi . Para este diseño, simplemente agregaremos un movimiento horizontal en el desplazamiento.

Actualice lo siguiente:

En la pestaña Movimiento horizontal…

Escritorio

  • Habilitar movimiento horizontal: SÍ
  • Compensación inicial: 6 (al 20 %)
  • Compensación media: 0 (al 40 %-60 %)
  • Compensación final: -6 (al 80 %)

Teléfono

  • Compensación inicial: 3
  • Compensación final: -3

Asegúrese de configurar el activador del efecto de movimiento en la mitad del elemento también:

  • Disparador de efecto de movimiento: medio del elemento

Agregar espaciado de sección

Para crear un espacio de desplazamiento temporal para probar el diseño, agregue lo siguiente a la sección:

  • Margen: 80vh arriba, 80vh abajo

Resultado

Aquí está el resultado final del primer diseño.

Diseño 2: degradado de fondo de texto con efecto de desplazamiento giratorio

Para este segundo diseño, vamos a crear un fondo degradado giratorio para el texto. También vamos a agregar un elemento de entrada y salida gradual.

Sección duplicada

Para crear el próximo diseño, duplique toda la sección que presenta el primer diseño que creamos.

Configuración del divisor de fondo

Luego actualice la configuración del divisor que se utiliza para el fondo del texto de la siguiente manera:

  • Ancho: 600px (escritorio), 300px (teléfono)
  • Altura: 600 px (escritorio), 300 px (teléfono)

Luego actualice las esquinas redondeadas de la siguiente manera:

  • Esquinas redondeadas: 50%

Esto le dará al divisor una forma circular que es lo que queremos para el efecto de desplazamiento de rotación que agregaremos al divisor.

A continuación, ajuste el desplazamiento vertical para colocar el círculo detrás del contenido del texto de la siguiente manera:

  • Desplazamiento vertical: -100 px (escritorio), -50 px (teléfono)

Actualizaciones de los divisores superior e inferior

Una vez que el divisor esté en su lugar, actualice el fondo del divisor superior de la siguiente manera:

  • Fondo degradado Color derecho: transparente

Luego actualice el fondo del divisor inferior de la siguiente manera:

  • Fondo degradado Color izquierdo: transparente

Actualizar los efectos de desplazamiento del divisor de fondo

Una vez que se actualizan los divisores superior e inferior, debemos agregar nuevos efectos de desplazamiento al divisor de fondo. Abra la configuración del divisor de fondo y actualice lo siguiente:

En la pestaña Aparición y desaparición gradual …

  • Habilitar fundido de entrada y salida: SÍ
  • Opacidad media: 100% (al 40%-60%)
  • Opacidad final: 0%

En la pestaña Escalar hacia arriba y hacia abajo …

  • Habilitar escalado hacia arriba y hacia abajo: SÍ
  • Escala inicial: 105%
  • Escala media: 115%
  • Escala final: 105%

En la pestaña Rotación …

  • Habilitar rotación: SÍ
  • Rotación inicial: 360 grados
  • Rotación final: -360 grados

Asegúrese de desactivar también el efecto de movimiento horizontal.

Resultado

Aquí está el resultado del diseño 2.

Diseño 3: Fondo de texto con múltiples círculos en movimiento

Para este tercer y último diseño, agregaremos múltiples divisores circulares que se mueven detrás del texto para lograr una hermosa animación en el desplazamiento.

Sección duplicada 2

Para hacerlo, primero duplica la sección.

Actualizaciones de los divisores superior e inferior

Luego abra la configuración para el divisor superior en la nueva/tercera sección y agregue el color negro nuevamente al fondo degradado de la siguiente manera:

  • Fondo degradado Color derecho: #000000

Abra la configuración del divisor inferior y actualice también el fondo.

  • Fondo degradado Color izquierdo: #000000

Creación de divisor de fondo 1

El primer divisor de fondo ya existe del diseño anterior, lo vamos a hacer más pequeño y lo animaremos de manera diferente.

Configuración del divisor de fondo 1

Abra la configuración del divisor de fondo y actualice lo siguiente:

  • Ancho: 250 px (computadora de escritorio y tableta), 125 px (teléfono)
  • Altura: 250 px (computadora de escritorio y tableta), 125 px (teléfono)
  • Desplazamiento vertical: 0px (escritorio, tableta y teléfono)

Efectos de desplazamiento del divisor de fondo 1

Luego restablezca los efectos de transformación que se transfirieron desde el diseño anterior haciendo clic derecho en el grupo de opciones de efectos de desplazamiento y seleccionando «Restablecer efectos de transformación de desplazamiento».

Ahora podemos agregar nuevos efectos de desplazamiento de la siguiente manera:

En la pestaña Movimiento vertical…

Escritorio

  • Habilitar movimiento vertical: SÍ
  • Compensación inicial: -2
  • Compensación media: 2 (al 60 %)
  • Compensación final: 4

Teléfono

  • Compensación inicial: -1
  • Compensación media: 1 (al 60 %)
  • Compensación final: 2

En la pestaña Movimiento horizontal…

  • Habilitar movimiento horizontal: SÍ
  • Compensación inicial: 0
  • Compensación media: 2 (al 45 %-65 %)
  • Compensación final: 0 (al 80 %)

Creación de divisor de fondo 2

Para crear el segundo divisor de fondo, duplique el primer divisor de fondo.

Actualizaciones de Background Divider 2

Fondo

Luego abra la configuración para el segundo divisor de fondo/duplicado y actualice el siguiente color de fondo:

  • Color izquierdo del degradado de fondo: rgba(224,153,0,0.9)
  • Gradiente de fondo Color derecho: rgba(255,243,71,0.9)

Tamaño

Luego actualice el tamaño de la siguiente manera:

  • Ancho: 300 px (escritorio y tableta), 150 px (teléfono)
  • Altura: 300 px (escritorio y tableta), 150 px (teléfono)

Efectos de desplazamiento

Luego actualice los efectos de desplazamiento de la siguiente manera:

En la pestaña Movimiento vertical…

Escritorio

  • Compensación inicial: 5
  • Desplazamiento medio: 0
  • Compensación final: -5

Teléfono

  • Compensación inicial: 2
  • Desplazamiento medio: 0
  • Compensación final: -2

En la pestaña Movimiento horizontal…

Escritorio

  • Compensación inicial: 0
  • Desplazamiento medio: 3
  • Compensación final: 2

Teléfono

  • Desplazamiento medio: 1,5
  • Compensación final: -1

Creación de divisor de fondo 3

Para crear el tercer y último divisor de fondo, duplique el divisor de fondo 2.

Background Divider 3 Actualizaciones

Fondo

Luego actualice los colores del degradado de fondo de la siguiente manera:

  • Gradiente de fondo Color izquierdo: rgba(124,218,36,0.9)
  • Gradiente de fondo Color derecho: rgba(12,113,195,0.9)

Tamaño

Luego actualice el tamaño de la siguiente manera:

  • Ancho: 200 px (computadora de escritorio y tableta), 100 px (teléfono)
  • Altura: 200 px (escritorio y tableta), 100 px (teléfono)

Efectos de desplazamiento

Luego actualice los efectos de desplazamiento de la siguiente manera:

En la pestaña Movimiento vertical…

  • Compensación inicial: 0
  • Desplazamiento medio: 0
  • Compensación final: 4

En la pestaña Movimiento horizontal…

Escritorio

  • Compensación inicial: 6 (al 20 %)
  • Compensación media: 0 (al 40 %-60 %)
  • Compensación final: 6 (al 80 %)

Teléfono

  • Compensación inicial: 3
  • Compensación final: 3

Aquí está el resultado final del diseño 3.

Resultados finales

Ahora veamos los resultados finales de los tres diseños.

Y aquí está el diseño en el móvil.

Versiones oscuras

Para crear una versión oscura de estos diseños, deberá cambiar el color blanco utilizado por el negro y también cambiar los colores negros utilizados por el blanco. Luego use el modo de fusión Multiplicar para el módulo de texto y los divisores superior e inferior.

Aquí se explica cómo hacerlo para el diseño 3.

Primero, cambie el fondo de la sección a negro.

Luego actualice la configuración del módulo de texto de la siguiente manera:

  • Color de fondo: #000000
  • Texto Color del texto: #ffffffff
  • Color del texto del título: #ffffff
  • Modo de fusión: Multiplicar

Aquí está el resultado.

Y así es como se verán el resto de los diseños con la versión oscura aplicada.

Pensamientos finales

Los diseños de animación de fondo de texto presentados en este artículo realmente funcionarían muy bien como un diseño estático sin la adición de movimiento en el desplazamiento. Sin embargo, los efectos de desplazamiento adicionales realmente llevan el diseño a un nivel completamente nuevo. ¡Siéntete libre de experimentar con más colores y efectos!

Espero escuchar de usted en los comentarios.

¡Salud!