Cómo agregar animaciones de texto avanzadas dentro de Divi con Letterize.js y Anime.js

Las animaciones incorporadas con Divin ofrecen muchas posibilidades cuando se trata de agregar esta ventaja adicional a su sitio web. Sin embargo, estas animaciones le permiten agregar una animación a un contenedor a la vez. Aunque, en la mayoría de los casos, esto suele ser más que suficiente, hay proyectos en los que querrá ir más allá. Por ejemplo, es posible que desee agregar animaciones de texto avanzadas. En este tutorial, le mostraremos exactamente cómo hacer esto. Este tutorial es un paso importante si desea averiguar cómo combinar DIV, como marco, con bibliotecas externas de JavaScript. Crearemos todo nuestro diseño utilizando los elementos y opciones integrados, luego se dirigiremos a nuestro módulo de texto con Letterize.js y Anime.js Bibliotecas para crear animaciones de texto avanzadas. Una vez que comprenda el enfoque, ¡podrá crear cualquier animación de texto avanzada que pueda imaginar!
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el texto de animaciones de diseños avanzados gratuitos para poner su mano en la apariencia de texto avanzada gratuita, 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. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Cree el diseño de la sección Hero Agregue una nueva sección de espaciado. Comience creando una nueva página o abriendo una existente. Dentro de su página, agregue una nueva sección. Abra la configuración de la sección y cambie el revestimiento superior e inferior en diferentes tamaños de pantalla.
Revestimiento superior: 180 PX (escritorio), 100 px (tableta), 50 px (teléfono)
Bajo forro: 180 PX (escritorio), 100 px (tableta), 50 px (teléfono)
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Espacio sin agregar módulos, abra la configuración de la fila y elimine todos los rellenos predeterminados desde abajo.

Finamiento inferior: 0 PX
Agregue el módulo de texto no. 1 En la columna, agregue una copia H1, la única forma que necesitamos en esta fila es un módulo de texto. Agregue contenido H1 a su elección.

Configuración de texto H1 Vaya a la pestaña Diseño del módulo y cambie la configuración de texto H1 de la siguiente manera:

Título de la fuente: Montserrat
Texto Pre -Text: RGBA (232.232.232.0.41)
Encabezado de texto de tamaño: 80 PX (escritorio), 50 px (tableta), 40 px (teléfono) Distancia entre letras: -10px (escritorio), -4px (tableta), -3px (teléfono)
Altura de la línea de dirección: 0.6em (escritorio), 0.7em (tableta), 0.8em (teléfono)
Agregue la estructura de la columna de la fila # 2 Agregar otra fila justo debajo de la anterior utilizando la siguiente estructura de columnas:
Dimensión Abra la configuración de la fila y cambie el ancho máximo en la configuración del tamaño.

Ancho máximo: 1680 PX

Espacio Retire todos los bordes inferiores y el revestimiento.
Margen inferior: 0 PX

Finamiento inferior: 0 PX
Agregue el módulo de imagen a la columna Cargue la ilustración y luego agregue un módulo de imagen y cargue la ilustración gratuita que puede encontrar en la carpeta que puede descargar al comienzo de esta publicación.
Dimension Switch a la pestaña Diseño del módulo y forzar el ancho de imagen completo.

Fuerza el ancho completo: si

Espacio Agregue un margen inferior negativo a continuación.
Margen inferior: -12%

Animación y complete la configuración del módulo agregando la siguiente configuración de animación:
Estilo de animación: Fade

Animación de retraso: 3000 ms
Agregue la estructura de la fila # 3 de la columna a la siguiente y última fila. Use la siguiente estructura de columna:
Cambio de espacio a la pestaña Diseño de línea y agregue algunos valores de llenado personalizados.

Revestimiento superior: 10%

Finamiento inferior: 5%
ENLIZACIÓN IZQUIERDA: 3%
Revelaje derecho: 3%
Box Shadow y luego activa una sombra de una caja sutil.
Poder de poco claro de la sombra de la caja: 80 px

Shadow Color: RGBA (0.0,0,0.06)
Animación y complete la configuración de la fila agregando la siguiente animación:
Estilo de animación: Fade


Animación de retraso: 3000 ms
Agregue el módulo de texto no. 2 En la columna, agregar contenido es tiempo para agregar módulos. El primer módulo que necesitamos es un módulo de texto con un contenido de descripción. Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de acuerdo con:
Texto de fuente: Lato

Tamaño del texto: 18 PX

Texto de la carta de espacio: 1 PX
La altura de la línea de texto: 2.7em
Agregue un módulo de botón a la columna Agregar una copia El último módulo que necesitamos es un módulo de botón. Ingrese una copia de su elección.
Botón Configuración Vaya a la pestaña Diseño del módulo y cambie la configuración del botón de la siguiente manera:
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 16 PX

El color del texto del botón: # 171cff
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Botón de fuente: Montserrat
El estilo de la fuente del botón: mayúscula
Espacio luego aplique los siguientes valores de llenado en la configuración de separación:

Revestimiento superior: 2%
Finamiento inferior: 2%

ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Box Shadow Complete la configuración del módulo agregando la siguiente sombra de cuadro:
Box Shadow Posición vertical: 5 PX
Poder de extender la sombra de la caja: -2 px

Color de la sombra: # 171cff
2. Agregue la clase CSS para encabezar el módulo de texto no. 1 Y haga clic en la pestaña Texto ahora que tenemos todos los elementos de diseño en su lugar, es hora de agregar 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.
Agregue un código CSS a la etiqueta H1 dentro de H1 Agregue una ID CSS personalizada.
Id = “headlinecopy”

3. Agregue las bibliotecas de letras y anime Agregue un módulo de código en la columna para crear animaciones, usamos las bibliotecas Letterize.js y Anime.js. Para agregar estas bibliotecas, ingrese un nuevo módulo de código en la columna de la última fila. Agregue ambas bibliotecas y luego, agregue dos etiquetas de script diferentes que contienen las siguientes fuentes que conducen a las bibliotecas:

Src = ”https://cdn.jsdeliv.net/gh/wojciechwkropce/letterize-js/lib/letterize.min.js”
Src = ”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

4. Agregue una animación de código de animación para la letra a nivel individual en la última parte de este tutorial, agregaremos el código de animación que forma parte de las bibliotecas Letterize.js y Anime.js. Para lograr el efecto que podría ver en la vista previa de esta publicación, aplicaremos dos tipos de animaciones. La primera animación se aplica a cada letra individual y consecutivamente. Esto se hace con la biblioteca Letterize.js. Esta biblioteca, en combinación con la primera parte del código a continuación, coloca cada letra en copia en un rango separado. Estos intervalos se dirigirán por separado durante todo el proceso de animación. Asegúrese de colocar el código a continuación entre las etiquetas de script.

JQuery (function ($) {
$ (documento) .Ready (function () {
Var flowlineCopy = new Letterize ({

Objetivos: “#HeadlinEcopy”
});
Lime animation = anime.timeline ({
Objetivos: ‘#HeadlinEcopy Span’,
Retraso: Anime.stagger (20),
Bucle: falso
});
animación
.agregar ({
Opacidad: [0, 1],
Escalas: [0, 1.2, 1],
Duración: 1500,
Elasticidad: 600,
Color: ‘#000’,
})
.agregar ({
Color: ‘#00fff7’,
})
.agregar ({
Color: ‘#d2befb’,
})
.agregar ({
Color: ‘#171cff’,
});
});
}); Cada función de adición representa una animación en una cronología de animación. Estas animaciones se aplican a cada letra a nivel individual. Puede cambiar estas funciones Agregar de todos modos que desee, agregar nuevas o eliminar las actuales, asegúrese de que la última función de agregar esté correctamente cerrada con un “;” al final (como puede ver en el código anterior). Puede agregar diferentes propiedades de CSS a estas funciones ADD. Puede obtener más información sobre las propiedades y cómo se usan en ejemplos de documentación de anime. En este tutorial, hemos agregado varias animaciones para mostrar cómo funciona la cronología, pero probablemente querrá ir con algo más sutil o más corto para sus propios proyectos. Proposición animación después de agregar la primera parte de la animación, a la que se dirige a cada letra Individualmente, pasaremos a la segunda parte de nuestra animación. Esta parte está dirigida a la copia completa en su conjunto. El enfoque de animación es el mismo que el anterior; Colocamos todo el módulo en una animación cronológica. Cada función de adición representa una animación diferente dentro de esa cronología. Puede cambiar estas funciones Agregar, agregar nuevas funciones o eliminar las actuales. Asegúrese de colocar este nuevo código antes del final del código de script, como puede ver en la pantalla de impresión a continuación. anime.timeline ({bucle: false})
.agregar ({
Objetivos: ‘#HeadlinEcopy’,
LineHeight: ‘1em’,
Retraso: ‘1500’

})
.agregar ({
Objetivos: ‘#HeadlinEcopy’,
Traducex: [‘-5%’, 0],
Letterspacing: ‘-2px’,
});
Agregue CSS personalizado para SPAN ahora, debido a que hemos creado un rango separado para cada una de nuestras letras, necesitaremos cambiar la propiedad de visualización de cada intervalo para permitir que las letras aparezcan una al lado de la otra. Para hacer esto, agregaremos algunos códigos CSS a nuestro módulo de código. Asegúrese de colocar el código entre las etiquetas de estilo. #headlinecopy span {display: inline-block;
}
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, le mostré cómo crear animaciones de texto avanzadas para su título. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación! Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.