Pon tu texto en movimiento con estos deslumbrantes efectos

La tendencia de poner todo en movimiento gobierna el gallinero en estos días. No puedes evitar seguir esta locura y desarrollar una obsesión por inyectar vida en cada detalle de un sitio web. La era estática se ha ido. Todo es dinámico. ¿Y sabes qué? Los usuarios son perfectamente conscientes de ello.

Para algunos, son malas noticias, ya que se necesitarán grandes esfuerzos para engañar a los usuarios para que crean que un sitio web estático brinda una experiencia emocionante. Para otros, es una oportunidad para presumir, revelar su genio interior y dejarse llevar por el mundo de la locura dinámica.

Si todavía está atascado creyendo que lo único que puede hacer con la tipografía es usar un tipo de letra poco convencional o un efecto de desplazamiento extravagante, entonces le demostraremos que está equivocado. Puedes hacer maravillas con la tipografía, transformándola en algo que no cederá a los demás en términos de crear una impresión.

Y si no eres fanático de las soluciones inmersivas o pesadas, entonces esta es una salida. Para darle un comienzo sólido, hemos recopilado varios fragmentos de código increíbles donde las letras se pusieron en movimiento hábilmente, lo que produjo un resultado excelente.

Animación de texto destrozado por Arsen Zbidniakov

Solo mire Shattering Text Animation de Arsen Zbidniakov. ¿No es brillante? La solución no abruma a los visitantes con mucha acción y dinámicas innecesarias ni sobrecarga su sistema. Simplemente funciona, dejando a todos en un estado de "wow".

Hecho con la ayuda de las herramientas GSAP y la ruta SVG, este efecto rompedor que ensambla y desensambla el texto es simplemente increíble. Además, pase el cursor del mouse sobre él y tendrá la oportunidad de controlar la velocidad del proceso, ralentizando todo. Es simplemente fenomenal.

Animación de texto por Szenia Zadvornykh

Al igual que nuestro primer ejemplo, este fragmento de código muestra una animación de ensamblar y desensamblar texto. Sin embargo, esta vez el artista usa Three.js para darle vida a todo. Esta es otra explosión controlable. Sí, me has leído bien: también puedes controlar la velocidad de la animación haciendo clic y arrastrando. Y si te gusta este experimento, Szenia tiene algunos ejemplos más entretenidos. Solo echa un vistazo a su perfil.

Tipografía gráfica en movimiento y otro experimento de Ara

Ara tiene varios experimentos alucinantes con la tipografía. Los dos ejemplos siguientes son abstractos, se basan en manipulaciones geométricas y se sienten y se ven de alta tecnología. De alguna manera son incluso un poco extraños.

En el primer ejemplo, el texto se compone de piezas diminutas que, de forma lenta pero segura, forman un túnel de partículas en 3D.

En el segundo, cada símbolo se construye a partir de polígonos primitivos como triángulos, cuadrados y rectángulos que se ponen en movimiento. Se siente como si la mano digital de alguien estuviera entretejiéndolo todo.

Animación de texto GSAP por Nate Wiley

Nate Wiley ha sacado provecho de Split Text de Greensock, recreando una maravillosa animación de texto. Toma un texto regular y lo expande en pequeños fragmentos, donde cada uno es un símbolo. Después de la explosión, los personajes se mueven en varias direcciones y desaparecen suavemente.

Tipografía de movimiento CSS: Explosión de texto por Dudley Storey

A diferencia de los ejemplos anteriores, donde las tecnologías de alta gama respaldan la belleza de las soluciones, aquí el movimiento basado en CSS dirige el espectáculo. Dudley Storey pone en acción animaciones de fotogramas clave CSS, transiciones, JavaScript, SVG y un poco de la magia de Adobe Illustrator. La palabra se rompe un poco y luego se rompe en pedazos poligonales de tal manera que todavía puedes leerla. Si desea agregar brutalidad con estilo a su tipografía, este efecto es sin duda un punto de partida.

Muchos íconos en 3D usando Three.js por Yasunobu Ikeda

Mientras que Nate Wiley elimina el texto, Yasunobu Ikeda, por el contrario, obliga a las partículas que se encuentran dispersas caóticamente por la pantalla a formar texto. Aquí las partículas no son más que pequeños iconos. El autor usa Three.js para recrear esta hermosa animación en 3D.

SVG Path texto animado por Tamino Martinius

Tamino Martinius se beneficia de manipulaciones más tradicionales mediante el uso de rutas SVG. Gracias a las formas elegantes, las líneas ultrafinas y el comportamiento líquido, la animación rezuma elegancia y refinamiento. Aunque no es tan alucinante como nuestro primer ejemplo, sus poderes radican en la capacidad de adaptarse a numerosos proyectos, ya que sin duda es una solución práctica.

Para un uso más práctico

Hablando de eso, también hemos incluido algunas soluciones inspiradoras y prácticas. Aquí, el tipo se pone en marcha para que pueda dar pequeños pasos en esta dirección.

Mientras que los primeros dos ejemplos presentan efectos que pueden ser beneficiosos para lemas y frases pegadizas, el último es una solución interesante para bloques de texto regulares.

Ciclo pensar – crear de Mikael Ainalem

El bolígrafo de Mikael Ainalem muestra una animación cíclica donde las palabras se resaltan en una rotación. Es una excelente manera de guiar a los usuarios de una palabra a otra.

PRESIONADO por Tryggvi Gylfason

Tryggvi Gylfason agrega una línea móvil que se desliza de izquierda a derecha y obliga a las letras a seguirla, presionando o tirando de los símbolos de una palabra. El efecto es pequeño pero cautivador.

Desenfoque de movimiento de desplazamiento de texto con TweenMax de Ignacio Correia

Ignacio Correia proporciona texto con un efecto de desenfoque de movimiento. Cuando te mueves hacia abajo a un ritmo rápido, el texto se vuelve borroso en un punto casi blanco. A medida que disminuye la velocidad, las palabras se vuelven menos oscuras.

Un caso para usar animación en tipografía

Estas animaciones tipográficas nos obligan a detenernos y disfrutar de la acción. Son tan inspiradores y llamativos como las animaciones que se pueden ver en otros elementos, como las áreas de los héroes.

Desafortunadamente, no vemos muchos de ellos en la naturaleza. Parece que todos están obsesionados con usar animaciones de pantalla completa llenas de acción en lugar de poner en movimiento letras simples. Pero como hemos visto aquí, estos efectos pueden tener el mismo impacto en los usuarios.