10 asombrosos fragmentos de código CSS y JavaScript de texto animado

Puedes hacer algunos efectos de texto bastante deslumbrantes con CSS básico y unas pocas líneas de JavaScript. Estos efectos van desde animaciones de visualización de texto hasta rotaciones 3D o cualquier otra cosa que puedas imaginar.

Y en esta publicación, he catalogado 10 de los mejores ejemplos de la web que muestran lo que puede hacer con solo un poco de texto estilizado y código CSS.

También te pueden gustar estas herramientas de animación CSS.

1. Animación del título

Este efecto de título animado de Robin Treur sigue el estilo de muchas películas o videojuegos. Las letras adquieren un efecto 3D sobresaliente utilizando sombras de texto CSS3 junto con una ligera inclinación diagonal.

El estilo de animación gradual me recuerda a las películas clásicas de la década de 1930 con el mismo texto inclinado. Todo se controla a través de CSS, pero el botón "reiniciar" se crea con JavaScript. De esta forma, puede reproducir la animación muchas veces para verla mejor.

2. Destrozo

Crear texto fragmentado es una tarea sencilla con herramientas como After Effects, pero crear una animación de fragmentación de texto con código es mucho más difícil, lo que hace que este bolígrafo de Arsen Zbidniakov sea bastante impresionante.

En realidad, el texto se crea con formas SVG, lo que facilita un poco el proceso de animación. Esto también significa que no puede seleccionar, copiar o interactuar con el texto como de costumbre.

Pero puede agregar un efecto similar a su sitio si lo usa para un logotipo u otro elemento de página no interactivo.

3. Letras torcidas

El desarrollador Mamun Khandaker armó esta colección de animaciones de letras retorcidas. Cada estilo de animación tiene un nombre diferente y puede explorarlos todos en este lápiz.

Pude ver estos efectos de texto utilizados en páginas de destino o páginas de inicio para una herramienta/aplicación web. Estos captan inmediatamente la atención y dejan una impresión duradera en el visitante. Además, todos están hechos con CSS 100 % puro y son muy fáciles de modificar.

4. Alfabeto de píxeles

Este efecto de píxel animado único es definitivamente extraño, pero extrañamente fascinante. Se basa principalmente en JavaScript y fue creado por el desarrollador Georgi Nikoloff como una forma de jugar con el elemento canvas de HTML5.

Utiliza Noto Serif como base de fuente y convierte las letras en elementos maleables dentro del elemento de lienzo. JavaScript divide las letras en puntos más pequeños y estos forman la base de la animación.

No puedo decir que esto tenga mucho uso práctico, pero es un testimonio de lo lejos que ha llegado la animación web.

5. Carrusel de escritura

Este efecto es notoriamente popular en carteras pequeñas y sitios web de agencias. La animación de texto de escritura a menudo aparece en el encabezado de un sitio e imita la apariencia de alguien escribiendo en un procesador de textos.

Todo está contenido dentro de un elemento con una buena combinación de animación CSS y JavaScript. A veces, verá que los sitios web usan esto para enumerar descripciones de su trabajo, su historial o los clientes con los que han trabajado.

Definitivamente es un efecto divertido cuando se usa con moderación . Dado que solo se ve una palabra a la vez, limita la legibilidad de la página, pero cuando se usa con moderación, este es un efecto muy bueno que cualquiera puede copiar.

6. Tigre Tigre

Tomando prestadas palabras del poema de William Blake "The Tyger", esta animación única de Joseph Martucci realmente llama tu atención.

El enfoque aquí no está tanto en el contenido, sino más bien en los estilos tipográficos y las animaciones. Cada "segmento" del texto tiene su propio estilo con contornos de texto y efectos brillantes. Es un gran ejemplo de cómo puedes diseñar una página de inicio para animar texto secuencialmente usando setTimeout() .

7. Snap SVG

La biblioteca Snap.svg de código abierto le permite a cualquiera crear imágenes SVG de alta resolución con solo un poco de código. Esto es mucho más fácil que aprender un programa como Illustrator y te permite animar como este divertido ejemplo creado por Alexis Blondin.

Todas las letras se crean dinámicamente a través de JavaScript, incluidos los caracteres aleatorios utilizados en la animación. El soporte SVG moderno es enorme y estos tipos de imágenes pueden cambiar radicalmente la forma en que creamos sitios web en los próximos años. Esta animación Snap.svg es solo un ejemplo y definitivamente es genial.

8. Animación de soporte

Aquí hay otra técnica de animación de texto bastante común que veo todo el tiempo. Utiliza corchetes con texto giratorio casi como un rolodex en la página.

Esta animación imita el efecto de carrusel de escritura que mencioné anteriormente, excepto que esto se puede hacer solo con CSS. Se basa en una animación en bucle personalizada que se mueve de un fotograma clave CSS a otro, y cada fotograma muestra una palabra o frase diferente en el texto giratorio.

Encuentro este efecto mucho más sutil y fácil de leer en una página de inicio. Si está buscando algunos efectos de texto geniales para su página de inicio, esta sería una excelente opción.

9. La irrompible Kimmie Schmidt

Este dulce efecto de logotipo se tomó prestado de la serie de Netflix "Unbreakable Kimmie Schmidt". Todo se crea con CSS, incluidos los estilos de texto y las animaciones personalizadas.

El cuerpo de la página tiene una clase que inicia la animación y esta clase se agrega a la página usando JavaScript. A partir de ahí todo es CSS puro. En su mayoría, utiliza un montón de transformaciones para crear el efecto de rebote sorprendentemente realista.

Es otro ejemplo más de cuánto puede hacer CSS3 si sabe cómo usarlo.

10. Relleno de texto SVG

Por último, llegamos a esta animación de relleno SVG única que utiliza una combinación de sombras de cuadro y la propiedad de trazo CSS.

Este texto está construido completamente con SVG, pero también se puede seleccionar para que pueda copiar y pegar letras como texto normal. Es totalmente compatible con todos los navegadores y la animación es lo suficientemente sutil como para encajar en cualquier sitio web.

Todas estas animaciones de texto aportan algo nuevo a la mesa. Es posible que no los encuentre todos prácticos o utilizables en su propio trabajo, pero demuestran que casi todo es posible con el enfoque correcto.