Cómo crear animación para llevar a cabo el fondo del texto colorido con la división

Crear la animación del fondo de texto es una forma única de agregar texturas coloreadas al texto en su sitio web mientras un usuario ejecuta la página. Con Div, el proceso es sorprendentemente fácil una vez que ha aprendido algunas técnicas clave. En este tutorial, no usaremos nada más que el poder de la configuración construida de la división para crear 3 modelos únicos que tengan una animación colorida del fondo del texto. Le mostraremos cómo crear una versión oscura de cada diseño para un aspecto completamente nuevo. ¡Vamos a empezar! Pull With the Eye es un vistazo rápido a los proyectos que construiremos hoy.
Descargue los problemas de animación con el desfile de texto de fondo para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Proyecto 1: Gradiente de fondo de texto con efecto de desarrollo horizontal Este primer diseño tendrá un efecto de desarrollo horizontal que anima un módulo divisor colorido detrás de un módulo de texto con el filtro de pantalla. Agregue una columna para comenzar, agregue una fila con una columna a la sección predeterminada.
Agregue un módulo de texto y luego agregue un nuevo módulo de texto a la columna.

Contenido Para el contenido de la columna, pegue el siguiente HTML al cuadro de contenido:

Diseño de texto y luego actualice el diseño de texto de la siguiente manera:

Color de fondo: #ffffff
Text -Text Style: TT
Color de texto de texto: # 000000
Tamaño de texto de texto: 100 PX (escritorio), 40 px (teléfono)
Texto de la carta de espacio: 0.15em
La altura de la línea de texto: 1em
Alineación de texto: Centro
Fuente del título: Merriweather

Título Fuente de peso: Bold
Estilo de fuente de título: TT
Alineación del texto del encabezado: Centro
Text Pre -Text: # 000000
Encabezado de texto de tamaño: 200 PX (escritorio), 80 PX (teléfono)
Distancia entre letras: 0.15em
Altura de la línea de dirección: 1em
El revestimiento y el filtro ahora deben agregar un relleno pequeño 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 módulos de colores / fondo se muestren detrás del texto. Para agregar el relleno y el filtro, actualice lo siguiente: revestimiento: 15 px hacia arriba, 20 px hacia abajo

Modo de mezcla: pantalla
Nota: El modo de mezcla de pantalla funciona mejor con el texto negro sobre un fondo blanco. Si nos gustaría usar el texto blanco sobre un fondo negro, usaríamos el modo de mezcla Multiply.
El divisor superior e inferior Una vez que se completa nuestro módulo de texto, agregue algunos separadores (arriba y uno debajo del módulo de texto) para un elemento de diseño adicional. Agregue el divisor inferior Agregue un nuevo módulo divisor en el módulo de texto.
Configuración de separación En la parte superior, abra la configuración del divisor y seleccione no mostrar el divisor.

Luego actualice el fondo y le dé al divisor el mismo modo de mezcla que el módulo de texto de la siguiente manera:

Fondo degradado Izquierda: # 000000

Color derecho de fondo degradado: #ffffff
Dirección de gradiente: 90 grados
Posición inicial: 48%
Posición final: 0%
Modo de mezcla: pantalla
Luego actualice la altura del separador en la pantalla del teléfono de la siguiente manera:
Altura: 15 PX (teléfono)

Agregue el divisor superior para crear el divisor superior, copie el divisor inferior inferior y tire del módulo de texto usando el cuadro de vista de capa.
Luego invierta los colores al fondo degradado.

Actualice la configuración de la fila Una vez que nuestros separadores superiores e inferiores estén en su lugar, actualice la configuración de la fila de la siguiente manera:

El ancho de la canaleta: 1 (para eliminar los bordes más bajos entre los módulos) Ancho máximo: 600 PX (para mantener un diseño consistente en el escritorio y la tableta)

Alineación de filas: centro
Forro: 0 px arriba, 0 px abajo
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Cree el divisor para el color de fondo del texto animado El último elemento para 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 bajo el divisor inferior.
Luego seleccione no mostrar el divisor.
Actualización de fondo de divisor de configuración El divisor con fondo de gradiente de la siguiente manera:

Fondo degradado Izquierda: # E02B20

Color derecho de fondo degradado: # 8300E9

Dirección de gradiente: 90 grados
Posición inicial: 30%
Posición final: 70%
Queremos establecer que la altura del divisor sea lo suficientemente alta como para colorear todo nuestro texto en el módulo de texto y los divisores superiores e inferiores. Para este diseño, establezca la altura en 400 px.
Altura: 400 PX
Luego, déle al divisor una posición absoluta para colocarlo directamente sobre los otros módulos. Use el índice Z para hacer que el divisor se encuentre detrás de los otros módulos.

Posición: Absoluto
IND ÍNDICE: -1

Efectos de realizar los antecedentes con el divisor en posición, todo lo que tenemos que hacer es mover el divisor detrás del texto utilizando los efectos de desplazamiento de Div. Para este diseño, simplemente agregaremos un movimiento horizontal al desplazamiento.
Actualizar lo siguiente: En la pestaña Movimiento Horizontal … Desktop
Active el movimiento horizontal: sí

Comenzando el desplazamiento: 6 (al 20%)
GAPACIÓN PROMEDIA: 0 (a 40% -60%)
Compensación final: -6 (al 80%)
Teléfono
Compensación de inicio: 3 Calcomanía final: -3
Asegúrese de establecer el activador del efecto de movimiento y el medio del elemento:
El desencadenante del efecto de movimiento: el medio del elemento
Agregue el espacio de las secciones para crear un espacio de desplazamiento temporal para probar el diseño, agregue lo siguiente a la sección:
Marja: 80VH arriba, 80VH abajo
El resultado es el resultado final del primer diseño. Diseño 2: El gradiente de fondo del texto con efecto de desplazamiento rotativo
Para este segundo diseño, crearemos un fondo de gradiente giratorio. También agregaremos un elemento de decoloración hacia y por fuera. La sección DuplCate para crear el siguiente diseño, copie la sección completa con el primer diseño que creé.

Configuración de fondo divisor y luego actualice la configuración del divisor utilizado para el fondo del texto de la siguiente manera:
Ancho: 600 PX (escritorio), 300 PX (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 queremos para el efecto de la rotación que agregaremos al divisor. Luego ajuste el espacio vertical para colocar el círculo detrás del contenido de texto de la siguiente manera:
Gap vertical: -100px (escritorio), -50px (teléfono)

Actualizaciones del divisor superior e inferior Una vez que el divisor esté en su lugar, actualice los antecedentes del divisor superior, de la siguiente manera:
Color derecho de fondo degradado: transparente

Luego actualice la parte inferior del divisor inferior de la siguiente manera:
Color de fondo con mano izquierda: transparente

Actualice los efectos del divisor de fondo Una vez que se actualizan los separadores superior e inferior, debemos agregar nuevos efectos de desfile al divisor de fondo. Abra la configuración para el divisor de fondo y actualice lo siguiente: debajo de la pestaña Fading in y hacia afuera … Habilite el desvanecimiento dentro y fuera: Sí
Opacidad promedio: 100% (al 40% -60%)

Opacidad final: 0%
Debajo de la pestaña de escala hacia arriba y hacia abajo …

Active la escala hacia arriba y hacia abajo: sí
Escala de inicio: 105%
Escala promedio: 115%
Escala de conclusión: 105%
En la pestaña de rotación …
Activar la rotación: si
Rotación de arranque: 360 grados
Rotación final: -360deg
Asegúrese de deshabilitar también el efecto del movimiento horizontal.
El resultado es el resultado del diseño 2. Proyecto 3: fondo de texto con múltiples círculos móviles para este tercer y último diseño, agregaremos varios separadores circulares que se mueven detrás del texto para una hermosa animación de desplazamiento. Duplicar la sección 2 Para hacer esto, primero copie la sección.
Las actualizaciones del divisor superior e inferior luego abren la configuración para el divisor superior en la nueva sección / tercera sección y agregue el color negro al fondo de gradiente, de la siguiente manera:
Color derecho de fondo degradado: # 000000
Abra la configuración para el divisor inferior y la actualización y el fondo.

Fondo degradado Izquierda: # 000000

Creando el divisor de fondo 1 El primer divisor de fondo ya existe del diseño anterior, lo haremos más pequeño y lo animaremos de manera diferente. Configuración del divisor de fondo 1 Abra la configuración para el fondo y actualice lo siguiente:

Ancho: 250 PX (escritorio y tableta), 125 PX (teléfono)
Altura: 250 PX (escritorio y tableta), 125 PX (teléfono)

GAP VERICAL: 0 PX (escritorio, tableta y teléfono) Divader de fondo 1 Efectos de desplazamiento y luego restablece los efectos de transformación que se han transferido del diseño anterior haciendo clic derecho en la opción Effect Parade y seleccionando “Restablecer los efectos de transformación de contaminación”.
Ahora podemos agregar nuevos efectos de desarrollo de la siguiente manera: debajo de la pestaña de movimiento vertical … Desktop

Habilitar el movimiento vertical: sí
Comenzando el desplazamiento: -2
GAPACIÓN PROMEDIA: 2 (al 60%)
Compensación final: 4

Teléfono

Comenzando el desplazamiento: -1
GAPACIÓN PROMEDIA: 1 (al 60%)
Compensación final: 2
Bajo la pestaña Movimiento Horizontal …
Active el movimiento horizontal: sí
Compensación de inicio: 0
GABE ADRIO: 2 (al 45% -65%)
Compensación final: 0 (al 80%)
Creando la división de fondo 2 para crear el segundo divisor de fondo, copie el primer divisor de fondo.

Background Divider 2 Actualizaciones de fondo y luego abra la configuración para el segundo / duplicado duplicado de fondo y actualice el siguiente color de fondo:
Color izquierdo del gradiente de fondo: RGBA (224,153,0,9)
Color derecho del gradiente de fondo: RGBA (255,243,71,0,9)
Tamaño y luego actualizar 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 luego actualice los efectos de desplazamiento de la siguiente manera: debajo de la pestaña de movimiento vertical … Desktop
Compensación de inicio: 5
Brecha promedio: 0

Grado final: -5
Teléfono
Compensación de inicio: 2

Brecha promedio: 0
Grado final: -2
Bajo la pestaña de movimiento horizontal … Desktop
Compensación de inicio: 0
Brecha promedio: 3
Compensación final: 2
Teléfono
GAPACIÓN PROMEDIA: 1.5

Grado final: -1
Creación de la división 3 de fondo para crear el tercer y último divisor de fondo, duplicar el divisor de fondo 2. Divisor de fondo 3 Fondo y luego actualice los colores del fondo de la siguiente manera:
Color izquierdo del gradiente de fondo: RGBA (124,218,36,0,9)
Color derecho del gradiente de fondo: RGBA (12,113.195.0.9)
Tamaño y luego actualizar el tamaño de la siguiente manera:
Ancho: 200 PX (escritorio y tableta), 100 PX (teléfono)
Altura: 200 PX (escritorio y tableta), 100 PX (teléfono)

Efectos luego actualice los efectos de desarrollo de la siguiente manera: en la pestaña Movimiento vertical …

Compensación de inicio: 0
Brecha promedio: 0
Compensación final: 4

Bajo la pestaña de movimiento horizontal … Desktop
Comenzando el desplazamiento: 6 (al 20%)
GAPACIÓN PROMEDIA: 0 (a 40% -60%)

Compensación final: 6 (al 80%)
Teléfono
Compensación de inicio: 3
Compensación final: 3

Aquí está el resultado final del Proyecto 3. Resultados finales ahora, para verificar los resultados finales de los tres modelos. Y aquí está el diseño móvil. Versiones oscuras Para crear una versión oscura de estos modelos, deberá cambiar el color blanco utilizado para el negro y también cambiar los colores negros utilizados para el blanco. Luego use el modo de combinación múltiple para el módulo de texto y los separadores superior e inferior. Aquí le mostramos 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
Color de texto de texto: #fffffff
Encabezado de texto en color: #ffffff
Modo de mezcla: multiplicación