Cómo animar texto usando Animate.js y Letterize.js en Divi

DIVI viene con toneladas de posibilidades de animaciones a la hora de dar dinamismo a un sitio web. Sin embargo, solo puede agregar estas animaciones una vez a la vez a un contenedor. Si para alguna animación es lo suficientemente perfecto, a tiempo, puede encontrarlo rápidamente limitado. Por ejemplo, a veces, es posible que desee agregar más de una animación de texto y eso es lo que cubriremos hoy usando el módulo de texto, Letterize.js y Animate.js, que son bibliotecas de JavaScript que brindan animación CSS a los elementos DOM. Con ese enfoque, podrá crear dicha animación con cualquier otro módulo Divi.

Empecemos.

Resultado final posible

Aquí hay un posible resultado al que podemos llegar al final del tutorial.

1. Crea un diseño de sección Hero

Comenzaremos creando una gran sección también llamada "Sección de héroe", y le agregaremos una sección única.

Agregar nueva sección

Spacing

Empiece por crear una nueva página. Dentro de esa página, agregue una nueva sección. Abra la configuración de la sección y modifique el relleno superior e inferior de la siguiente manera:

• Relleno superior: 180 px (escritorio), 100 px (tableta), 50 px (teléfono)
• Relleno inferior: 180 px (escritorio), 100 px (tableta), 50 px (teléfono)

Agregar una fila

Single Column Structure

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Configure Spacing

No agregaremos ningún módulo ahora, sino que definiremos la configuración de relleno.

• Acolchado inferior: 0px

Agregar módulo de texto a la primera columna

Add H1 Copy

El único módulo que agregaremos a esta fila es un módulo de texto. Agregue contenido H1 de su elección.

H1 Text Settings

Cambie a las pestañas de diseño del módulo y cambiemos la siguiente configuración de texto:

• Fuente de encabezado: Montserrat
• Color del texto del encabezado: rgba (232,232,232,0.41)
• Tamaño del texto del encabezado: 80 px (escritorio), 50 px (tableta), 40 px (teléfono)
• Espaciado entre letras del encabezado: -10px (escritorio), -4px (tableta), -3px (teléfono)
• Altura de la línea de rumbo: 0.6em (escritorio), 0.7em (tableta), 0.8em (teléfono)

Agregar una segunda fila

Column Structure

Agreguemos otra fila justo debajo de la anterior con la siguiente estructura de columnas:

Sizing

Abra la configuración de fila y cambie el ancho máximo en la configuración de tamaño.

• Ancho máximo: 1680px

Spacing

Quite todo el margen inferior y el relleno a continuación.

• Margen inferior: 0px
• Acolchado inferior: 0px

Agregue un módulo de imagen a la segunda columna

Upload An Illustration

Luego, agreguemos un Módulo de imagen y carguemos una ilustración de su elección. Debería verse como una ilustración de fondo.

Sizing

Ahora cambie a la pestaña de diseño del módulo y fuerce el ancho completo en la imagen.

• Forzar ancho completo: Sí

Spacing

Agregue un margen inferior negativo a continuación.

• Margen inferior: -12%

Animation

Completemos la configuración del módulo agregando la siguiente configuración de animación:

• Estilo de animación: Fundido
• Retraso de animación: 3000 ms

Agregar la tercera fila

Define The Column Structure

A la siguiente y última fila. Utilice la siguiente estructura de columnas:

Spacing

Vaya a la pestaña de diseño de la fila y agregue algunos valores de relleno personalizados.

• Acolchado superior: 10%
• Acolchado inferior: 5%
• Acolchado izquierdo: 3%
• Acolchado derecho: 3%

Box Shadow

Luego, seleccione una sombra de caja sutil.

• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.06)

Animation

Y complete la configuración de la fila agregando la siguiente animación:

• Estilo de animación: Fundido
• Retraso de animación: 3000 ms

Agregar módulo de texto a la tercera fila

Provide Content

No agreguemos módulos. El primer módulo que necesitamos es un módulo de texto con algún contenido.

Text Settings

Vaya a la pestaña de diseño del módulo y modifique la configuración del texto en consecuencia:

• Fuente de texto: Lato
• Tamaño del texto: 18px
• Espaciado de letras de texto: 1px
• Altura de la línea de texto: 2.7em

Agregar un módulo de botones a la columna

Provide Text

El último módulo que necesitamos es un módulo de botones. Ingrese un texto de su elección.

Button Settings

Vaya a la pestaña de diseño del módulo y cambie la configuración de los botones de la siguiente manera:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 16px
• Color del texto del botón: # 171cff
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px

• Fuente del botón: Montserrat
• Estilo de fuente del botón: mayúsculas

Spacing

Luego, aplique los siguientes valores de relleno dentro de la configuración de espaciado:

• Acolchado superior: 2%
• Acolchado inferior: 2%
• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

Box Shadow

Complete la configuración del módulo agregando la siguiente sombra de cuadro:

• Posición vertical de la sombra del cuadro: 5px
• Fuerza de propagación de la sombra de la caja: -2px
• Color de sombra: # 171cff

2. Agregar clase CSS al título

Abra el primer módulo de texto y haga clic en la pestaña Texto

Ahora que tenemos todos los elementos de diseño en su lugar, es hora de agregar las animaciones de texto avanzadas a nuestro título. Abra el módulo de texto que contiene la copia H1 y seleccione la pestaña de texto.

Agregar atributo de ID a la etiqueta H1

Dentro del H1 agregue un atributo de ID personalizado.

• ID = "título-copia"

3. Agregar bibliotecas de anime y letras

Agregar módulo de código a la columna

Para crear las animaciones, usamos las bibliotecas letterize.js y anime.js. Para agregar estas bibliotecas, inserte un nuevo módulo de código en la columna de la última fila.

Incluir ambas bibliotecas

Luego, agregue dos etiquetas de secuencia de comandos diferentes que contengan las siguientes fuentes que conduzcan a las bibliotecas:

• <script src = ”https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js”> </script>
• <script src = ”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”> </script>

4. Agregar código de animación

Animación para carta a nivel individual

En la última parte de este tutorial, agregaremos el código de animación y funcionará para las bibliotecas letterize.js y anime.js. Para lograr un buen efecto en los textos, vamos a aplicar dos tipos de animaciones. La primera animación se aplica a cada letra de forma individual y consecutiva. Esto se logra con la biblioteca letterize.js. Esta biblioteca, en combinación con la primera parte del código a continuación, coloca cada letra en su copia dentro de un espacio separado. Estos tramos, entonces, serán dirigidos por separado a lo largo del proceso de animación. Asegúrese de colocar el código a continuación entre las etiquetas del script.

jQuery(function ($) {
   $(document).ready(function () {
          var headlineCopy = new Letterize({
          targets: "#headline-copy"
       });
       var animation = anime.timeline({
          targets: headlineCopy.listAll(),
          delay: anime.stagger(20),
          loop: false
       });
      animation.add({
          opacity: [0, 1],
          scale: [0, 1.2, 1],
          duration: 1500,
          elasticity: 600,
          color: '#000',
      }).add({
          color: '#00FFF7',
      }).add({
          color: '#D2BEFB',
      }).add({
         color: '#171cff',
      });
   });
});

Cada función de "agregar" representa una animación en una línea de tiempo de animaciones. Estas animaciones se aplican a cada letra de forma singular. Puede modificar estas funciones de adición como desee siguiendo el API Letterize, agregar nuevas o eliminar las actuales, solo asegúrese de que la última función de adición se cierre correctamente con un ';' al final (como puede ver en el código de arriba) .

Puede agregar diferentes propiedades CSS dentro de estas funciones de "agregar". Puede obtener más información sobre las propiedades y cómo se utilizan en el Ejemplos de documentación de anime.js.

En este tutorial, hemos agregado intencionalmente varias animaciones para mostrar cómo funciona la línea de tiempo, pero es posible que desee utilizar algo más sutil o más corto para sus propios proyectos.

Animación de oración

Una vez que haya agregado la primera parte de la animación, que apunta a cada letra individualmente, pasaremos a la segunda parte de nuestra animación. Esta parte se dirige a la copia completa como un todo. El enfoque de la animación es el mismo que el anterior; colocamos todo el módulo dentro de una animación de línea de tiempo. Cada función de adición representa una animación diferente dentro de esa línea de tiempo. Puede modificar estas funciones de agregar, agregar nuevas o eliminar las actuales. Asegúrese de colocar este nuevo código antes del final del código de secuencia de comandos, como puede observar en la pantalla de impresión a continuación.

anime.timeline({loop: false}) 
   .add({targets: '#headline-copy',lineHeight: '1em',delay: '1500' }) 
   .add({targets: '#headline-copy',translateX: ['-5%', 0],letterSpacing: '-2px',});

Agregar CSS personalizado para Span

Ahora, dado que hemos creado un intervalo separado para cada una de nuestras letras, tendremos que cambiar la propiedad de visualización de cada intervalo para permitir que las letras aparezcan una al lado de la otra. Para hacer eso, agregaremos código CSS a nuestro módulo de código. Asegúrese de colocar el código entre las etiquetas de estilo.

#headline-copy span {display: inline-block;}

Vista previa final

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales

Entonces, a lo largo de esta publicación, le mostramos cómo crear animaciones de texto para su título. Hemos creado todo el diseño dentro de Divi y combinado el marco con las bibliotecas Letterize.js y Anime.js. ¿Probarás esta animación en tu blog? ¿Tienes alguna otra animación para compartir con nosotros? Haznos saber.