Crear una animación de desplazamiento de fondo de texto es una forma única de agregar texturas animadas coloridas a su texto. Sitio web mientras un usuario se desplaza por la página. Con Divi, el proceso es sorprendentemente fácil una vez que aprende algunas técnicas clave.
En este tutorial, solo usaremos el poder de los parámetros integrados de Divi para crear 3 diseños únicos que cuentan con 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 completamente nueva.
Vamos a empezar!
Resultado posible
Aquí hay un vistazo a los diseños que crearemos hoy.
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 módulo separador de color detrás de un módulo de texto con el filtro de pantalla.
Agregar una columna
Para comenzar, agregue una fila de una columna a la sección predeterminada.
Añadir un módulo de texto.
Luego agregue un nuevo módulo de texto a la columna.
Contenido
Para el contenido columna, pegue el siguiente código HTML en el cuadro contenido:
Dar formato al texto
Luego actualice el diseño del texto de la siguiente manera:
- Color de fondo: #ffffff
- Estilo de fuente de texto: TT
- Color del texto: # 000000
- Tamaño del texto: 100 px (escritorio), 40 px (teléfono)
- Espacio entre letras de texto: 0.15em
- Altura de la línea de texto: 1em
- Alineación del texto: centro.
- Fuente del título: Merriweather
- Peso de la fuente del título: negrita
- Estilo de fuente del título: TT
- Alineación del texto del encabezado: centro
- Color del texto del encabezado: # 000000
- Tamaño del texto del encabezado: 200 px (escritorio), 80 px (teléfono)
- Espacio entre letras de título: 0.15em
- Altura de la línea de título: 1em
Acolchado y filtro
Ahora necesitamos agregar algo de relleno y filtro de pantalla al módulo de texto. El filtro es necesario para que este diseño funcione, ya que es lo que permite que los colores / modificaciones de fondo se muestren detrás del texto.
Para agregar el relleno y el filtro, actualice lo siguiente:
- acolchado: 15px alto, 20px bajo
- Modo de fusión: pantalla
Nota: el modo de combinación de pantalla funciona mejor con texto negro sobre fondo blanco. Si quisiéramos usar texto blanco sobre un fondo negro, usaríamos el modo de fusión Multiplicar.
Separador superior e inferior
Una vez que nuestro módulo de texto esté completo, agreguemos algunos separadores (arriba y uno debajo del módulo de texto) para un elemento de diseño adicional.
Agregar un separador inferior
Agregue un nuevo módulo de separación debajo del módulo de texto.
Configuraciones de separación más altas
Abra la configuración del separador y seleccione NO para mostrar el separador.
Luego actualice el fondo y dé al divisor el mismo modo de fusión que el módulo de texto de la siguiente manera:
- Color de fondo degradado izquierdo: # 000000
- Color de fondo degradado a la derecha: #ffffff
- Dirección de degradado: 90deg
- Posición de inicio: 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: 15 px (teléfono)
Agregar separador superior
Para crear el divisor superior, duplique el divisor inferior anterior y arrástrelo sobre el módulo de texto usando el área de visualización de capas.
Luego invierta los colores en el fondo degradado.
Actualizar parámetros de línea
Una vez que nuestros separadores superior e inferior estén en su lugar, actualice los parámetros de línea de la siguiente manera:
- Ancho de canal: 1 (para eliminar los márgenes inferiores entre los módulos)
- Ancho máximo: 600 píxeles (para mantener un diseño coherente en el escritorio y la tableta)
- Alineación de línea: centro
- Relleno: 0px alto, 0px bajo
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Crea un separador para el color de fondo del texto animado.
El último elemento de este primer diseño es el divisor que usaremos para animar el color de fondo del texto en el pergamino. Para hacer esto, agregue un nuevo módulo de separación debajo del divisor inferior.
Luego seleccione NO para mostrar el separador.
Configuración del divisor de fondo
Actualice el separador con un fondo degradado de la siguiente manera:
- Color de fondo degradado izquierdo: # e02b20
- Color de gradiente de fondo derecho: # 8300e9
- Dirección de degradado: 90deg
- Posición de inicio: 30%
- Posición final: 70%
Queremos que la altura del separador sea lo suficientemente alta para colorear todo nuestro texto en el módulo de texto y los separadores superior e inferior. Para este diseño, establezca la altura en 400 px.
- Altura: 400px
Luego, déle al divisor una posición absoluta para colocarlo directamente sobre los otros módulos. Utilice el índice Z para colocar el divisor detrás de los otros módulos.
- Posición: absoluta
- Índice Z: -1
Efectos de desplazamiento del divisor de fondo
Con el separador en posición, lo único que tenemos que hacer es mover el separador detrás del texto usando los efectos de desplazamiento de Divi. Para este diseño, simplemente agregaremos movimiento horizontal en el desplazamiento.
Actualice los siguientes elementos:
En la pestaña Movimiento horizontal ...
oficina
- Activar movimiento horizontal: SÍ
- Compensación de inicio: 6 (al 20%)
- Compensación promedio: 0 (a 40% -60%)
- Compensación final: -6 (al 80%)
Teléfono
- Inicio de desplazamiento: 3
- Desplazamiento final: -3
Además, asegúrese de configurar el disparador para el efecto de movimiento en el medio del clip:
- Efecto de movimiento de disparo: 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
Consideraciones finales
Los diseños de animación de fondo de texto que se muestran en este artículo funcionarían realmente bien como diseño estático sin el movimiento adicional 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 tener noticias tuyas en los comentarios.
¡A vuestra salud!
