Cómo animar las letras para patrones de texto únicos en Div

La animación se ha convertido en una parte común de la experiencia del usuario para los sitios web modernos. Además del hecho de que se ve muy bien, también puede agregar un elemento interactivo sutil que implica que el usuario da contenido de vida. Los efectos de animación de Divin ‘Built te permiten animar casi cualquier elemento en una página con diferentes estilos de animación. En este tutorial, le mostraré cómo animar letras para algunos modelos de texto únicos en el Div. Al ingresar las letras individuales en un módulo de texto, puede orientar la animación de cada letra con diferentes estilos de animación, duración y retrasos que harán que el contenido se destaque de manera creativa. Esta técnica es solo para fines de diseño, porque las letras que componen el contenido no serán muy amigables con el SEO. Sin embargo, las letras animadas le permiten compartir la historia de sus usuarios de una manera increíble.
Vamos a empezar. Tirar del ojo






Descargue el esquema de ejemplos de diseño de animación para letras de forma gratuita para tener en sus manos las letras de las letras en este tutorial, primero tendrá que 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!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? Nociones para este tutorial, solo necesitas una división. Construiremos los proyectos desde cero utilizando el Builder Divi en el frente. Para comenzar, cree una nueva página, proporcione un título a su página e implementa hacer clic para usar Divi Builder. Luego elija la opción “Build From Cero” y haga clic para construir en el frente. ¡Ahora estás listo para diseñar! Construyendo el aspecto para animar las letras que agregan la sección, la fila y la columna continuar y crear una nueva sección con una fila con una columna.
Antes de comenzar a agregar nuestros módulos de texto (que contendrán letras blancas), agregue una imagen de fondo oscuro a la sección. Abra la configuración de la sección y agregue una imagen de fondo. Utilizo una imagen de fondo abstracta desde el aspecto prefabricado de la página de destino de la compañía de inversión.

Creando bloques de letras individuales con módulos de texto antes de comenzar a agregar animación a las letras, primero debemos crear un módulo de texto separado para cada letra que queremos agregar. Para este ejemplo, crearemos el texto “Diseño de diseño”. Debido a que esta frase de texto incluye 11 espacios de espacio (incluido el espacio entre letras, necesitaremos agregar 11 módulos de texto diferentes. Continuar y agregar un módulo de texto a la columna.

En el cuadro de contenido, agregue la primera letra en su texto, que en este caso es la letra “D”.
Luego actualice la configuración de diseño de texto de la siguiente manera:

Texto de fuente: Rubik

Text -Text Style: TT
Color de texto de texto: #ffffff
Tamaño de texto de texto: 80 PX (escritorio), 50 px (tableta), 30 px (teléfono)
La altura de la línea de texto: 1.6em
Orientación de texto: centro
Luego agregue una animación al módulo de texto de la siguiente manera:
Estilo de animación: diapositiva

Dirección de Animación: Up
Duración de la animación: 600 ms
Animación de retraso: 100 ms
Opacidad de animación para comenzar: 100%
Duplicar el módulo de texto y actualizar el contenido con la letra “I”. Luego aumente su retraso de animación con 100 ms de la siguiente manera:
Retraso de animación: 200 ms

Duplicar el módulo de texto y actualizar el contenido con la letra “V”. Luego aumente el retraso de la animación a 300 ms.
Animación de retraso: 300 ms

Duplicar el módulo de texto y actualizar el contenido con la letra “I”. Luego aumente el retraso de la animación a 400 ms.
Retraso de animación: 400 ms

Para el siguiente modo de texto, queremos agregar un espacio vacío. Duplicar el módulo de texto y agregar el siguiente HTML al cuadro de contenido: & amp; nbsp;
No hay necesidad de actualizar el retraso de animación para ello.

Luego copie el módulo de texto y actualice el contenido con la letra “D”. Esta es la primera letra en la palabra “diseño”. Luego, aumente su retraso de animación a 500 m. Animation Sting: 500 ms
Continúe el proceso de duplicación del módulo de texto y aumente el retraso de la animación en 100 ms para cada una de las letras restantes que definen la palabra “diseño”.
La letra “E”: Delay Animation 600ms
La letra “S”: Delay Animation 700ms

La letra “I”: retraso de animación a finales de 800 ms
La letra “G”: Retraso de animación a finales de 900 ms
La letra “n”: animación de retraso 1000 ms
Así es como se ve el diseño hasta ahora.
Agregar propiedad flexible para alinear los módulos horizontales, no el resultado que estamos buscando. Pero todo lo que tenemos que hacer es reunir el diseño para agregar un pequeño fragmento CSS a la columna de fila. Para hacer esto, abra la configuración promedio y agregue el siguiente CSS personalizado al elemento principal de la columna.
Pantalla: Flex;
Propiedad Flex: Flex alinea todos los módulos horizontalmente en una mesa flexible que se ajustará bellamente en diferentes anchos del navegador. Y debido a que los módulos están en fila con una columna, el diseño no se romperá en tabletas o dispositivos móviles. También debemos agregar un ancho de canaleta personalizado para eliminar el borde inferior debajo de las letras y agregar algunos rellenos superior e inferior para que las letras tengan espacio animado.


El ancho de la canaleta: 1
Revestimiento personalizado: 5VW arriba, 5VW abajo

Aquí esta el resultado final.
Agregando diferentes estilos de animación con esta configuración, puede agregar fácilmente nuevos estilos de animación para efectos completamente únicos. Para hacer esto, puede aprovechar la división múltiple para actualizar todos los módulos simultáneamente. En el frente, mantenga presionada la tecla de cambio y haga clic en el primer y último módulo de texto. Luego abra la configuración para uno de los módulos seleccionados. Esto abrirá la configuración modal del elemento, lo que le permitirá actualizar la configuración para todos los módulos seleccionados. No queremos cambiar el retraso de la animación, porque queremos mantener el efecto en cascada en cada letra. Sin embargo, podemos actualizar las otras opciones de animación de diferentes maneras para crear resultados completamente únicos. Le sugiero que copie la sección antes de probar una nueva animación para que pueda mantener los ejemplos anteriores. Aquí hay unos ejemplos. Animación de texto inversa con Zoom para animar letras con zoom inverso, actualice la configuración del elemento (configuración para todos los módulos) con lo siguiente:
Estilo de animación: Zoom

Director de Animación: Centro

Animación de intensidad: 200%

Aquí esta el resultado final.
TEXTO ANIMACIÓN DE LA ANIMACIÓN ANIMA LETRAS CON EFECTO ROTARIO DE OVO, actualice la configuración del elemento (configuración para todos los módulos) con lo siguiente:
Estilo de animación: rotación
Dirección de Animación: Up

Animación de intensidad: 100%

Aquí esta el resultado final.
Text Domino Animation Para animar el efecto Domino, actualice la configuración del elemento (configuración para todos los módulos) con lo siguiente:
Estilo de animación: Flip
Dirección de la animación: izquierda

Animación de intensidad: 100%

Aquí esta el resultado final.
Animación de texto de pie Para animar el efecto Domino, actualice la configuración del elemento (configuración para todos los módulos) con lo siguiente: Estilo de animación: pliegue
Dirección de Animación: Up
Animación de intensidad: 100%

Luego agregue la perspectiva de crear un elemento de diseño 3D agregando el siguiente CSS al elemento de la columna principal en la configuración de la fila. El elemento principal de la columna CSS: Perspectivas: 1000px;

Aquí esta el resultado final.
Anime las letras usando una combinación de indicaciones de animación Si desea ser más creativo, puede animar letras usando una combinación de efectos de animación. Para este ejemplo, usaré una combinación de direcciones de animación e intensidad para diapositivas. Esto nos dará una presentación completamente única. Aquí le mostramos cómo hacerlo. En primer lugar, copie una de las secciones que hemos construido anteriormente, para que podamos obtener un avance en el proceso de diseño. Luego borre los primeros 4 módulos de texto para que solo se muestre el texto del “diseño”.
Configuración de la sección Entonces, debido a que queremos que algunas de las letras en la animación comiencen fuera de la ventana de la sección, tendremos que agregar un fragmento CSS pequeño a la configuración de la sección, de la siguiente manera: Desbordamiento: Oculto;
Esto mantendrá las letras ocultas hasta que ingresen a la sección. Configuración de fila Ahora, para garantizar que nuestros módulos de texto (letras) permanezcan centrados, debemos agregar los siguientes CSS a la configuración promedio: Pantalla: Flex;

Justify-Concursing: Centro;

Configuración común del módulo de texto utilizando la selección múltiple, actualice los seis módulos de texto con la siguiente configuración de elementos:

Margen personalizado: 3% a la izquierda, 3% a la derecha

Ancho fronterizo: 1 PX

Color del borde: #FFFFFFFSTIL Animación: Diapositiva
Duración de animación: 2000 ms

Animación de retraso: 100 ms
Animación de intensidad: 300%
Se trata de la configuración de animación básica, que será común a todos los módulos de texto. Ahora podemos ajustar individualmente la configuración de animación para ellos. Configuración individual del módulo de texto En este momento, podemos divertirnos cambiando la configuración individual del módulo de texto para cambiar la dirección de la animación para cada uno. Esto nos permitirá animar las letras de una manera completamente única. Para cada letra, actualice la dirección de animación y la intensidad de la siguiente manera:
Letra D Dirección de la animación: arriba

La carta es la Dirección de Animación: Down
Letter S. Dirección de la animación: Izquierda Intensidad Animación: 80%
Letra i Dirección de animación: intensidad correcta Animación: 80%
Letra G Dirección de la animación: Down

Carta en la dirección de la animación: arriba
Aquí está el diseño final.
Así es como se ve en los dispositivos móviles.
Pensamientos finales Creo que es seguro decir que DIV tiene muchas formas de animar letras una vez que haya configurado correctamente. Y debo decir que fue lo suficientemente difícil como para no jugar con la configuración de animación cuando construyes estos ejemplos. ¡Hay tantas variantes posibles para probar! De todos modos, espero que esto te dé un poco de inspiración para tu próximo proyecto. Si hay algo, es posible que desee construirlo solo por diversión. Espero tener noticias suyas en los comentarios. ¡Suerte!