Defina seu texto em movimento com esses efeitos deslumbrantes

A tendência de colocar tudo em movimento domina os dias de hoje. Você não pode deixar de seguir essa loucura e desenvolver uma obsessão de injetar vida em cada detalhe de um site. A era estática acabou. Tudo é dinâmico. E sabe de uma coisa? Os usuários estão perfeitamente cientes disso.

Para alguns, isso é uma má notícia, já que serão necessários esforços hercúleos para induzir os usuários a acreditar que um site estático traz uma experiência emocionante. Para outros, é uma oportunidade de se exibir, revelar seu gênio interior e se deixar levar pelo mundo da loucura dinâmica.

Se você ainda está acreditando que a única coisa que pode fazer com a tipografia é usar um tipo de letra excêntrico ou um efeito de foco extravagante, então vamos provar que você está errado. Você pode fazer maravilhas com a tipografia, transformando-a em algo que não cede aos outros em termos de criar uma impressão.

E se você não é fã de soluções imersivas ou pesadas, então essa é de fato uma saída. Para dar a você um começo sólido, coletamos vários trechos de código incríveis onde as letras foram habilmente colocadas em movimento, trazendo um excelente resultado.

Quebrando a animação de texto por Arsen Zbidniakov

Basta olhar para Shattering Text Animation de Arsen Zbidniakov. Não é brilhante? A solução não sobrecarrega os visitantes com muita ação e dinâmicas desnecessárias nem sobrecarrega seu sistema. Ele simplesmente funciona, deixando todos em um estado “uau”.

Feito com a ajuda de ferramentas GSAP e caminho SVG, esse efeito de quebra que monta e desmonta o texto é simplesmente incrível. Além disso, passe o cursor do mouse sobre ele e você terá a oportunidade de controlar a velocidade do processo, desacelerando tudo. É simplesmente fenomenal.

Animação de texto por Szenia Zadvornykh

Assim como nosso primeiro exemplo, este trecho de código exibe uma animação de montagem e desmontagem de texto. No entanto, desta vez o artista usa Three.js para dar vida a tudo. Esta é outra explosão controlável. Sim, você leu certo: você também pode controlar a velocidade da animação clicando e arrastando. E se você gosta deste experimento, Szenia tem alguns exemplos mais divertidos. Basta dar uma olhada no perfil dele.

Tipo de letra Motion Graphic e outro experimento de Ara

Ara tem vários experimentos alucinantes com tipografia. Ambos os exemplos a seguir são abstratos, baseados em manipulações geométricas e parecem de alta tecnologia. De certa forma, eles são até um pouco bizarros.

No primeiro exemplo, o texto é composto de pequenos pedaços que lenta mas seguramente formam um túnel 3D de partículas.

Na segunda, cada símbolo é construído a partir de polígonos primitivos como triângulos, quadrados e retângulos que são postos em movimento. Parece que a mão digital de alguém está tecendo tudo junto.

Animação de texto GSAP por Nate Wiley

Nate Wiley transformou o Split Text de Greensock a seu favor, recriando uma maravilhosa animação de texto. Ele pega um pedaço de texto normal e o explode em pequenos fragmentos, onde cada um é um símbolo. Após a explosão, os personagens se movem em várias direções e desaparecem suavemente.

Tipografia CSS Motion: Exploding Text por Dudley Storey

Ao contrário dos exemplos anteriores em que as tecnologias de ponta estão por trás da beleza das soluções, aqui o movimento baseado em CSS comanda o show. Dudley Storey coloca em ação animações de quadro-chave CSS, transições, JavaScript, SVG e um pouco de magia do Adobe Illustrator. A palavra se quebra um pouco e depois se quebra em pedaços poligonais de tal forma que você ainda pode lê-la. Se você deseja adicionar uma brutalidade estilosa à sua tipografia, esse efeito é certamente um ponto de partida.

Muitos ícones em 3D usando Three.js por Yasunobu Ikeda

Enquanto Nate Wiley explode o texto, Yasunobu Ikeda, ao contrário, força partículas que estão caoticamente espalhadas pela tela a se formarem em texto. Aqui as partículas nada mais são do que pequenos ícones. O autor usa Three.js para recriar essa linda animação 3D.

Texto animado de caminho SVG por Tamino Martinius

Tamino Martinius se beneficia de manipulações mais tradicionais usando caminhos SVG. Graças a formas elegantes, linhas ultrafinas e comportamento líquido, a animação exala elegância e refinamento. Embora não seja tão alucinante quanto o nosso primeiro exemplo, seus poderes estão na capacidade de se encaixar em vários projetos, pois certamente é uma solução prática.

Para uso mais prático

Falando nisso, também incluímos algumas soluções inspiradoras e práticas. Aqui, o tipo é colocado em movimento para que você possa dar pequenos passos nessa direção.

Enquanto os dois primeiros exemplos apresentam efeitos que podem ser benéficos para slogans e frases cativantes, o último é uma solução interessante para blocos de texto regulares.

Pense – crie ciclo por Mikael Ainalem

A caneta de Mikael Ainalem mostra uma animação cíclica onde as palavras são destacadas em uma rotação. É uma excelente maneira de guiar os usuários de uma palavra para outra.

PRESSIONADO por Tryggvi Gylfason

Tryggvi Gylfason adiciona uma linha móvel que desliza da esquerda para a direita e força as letras a segui-la, pressionando ou puxando símbolos de uma palavra. O efeito é pequeno, mas cativante.

Desfoque de movimento de rolagem de texto com TweenMax de Ignacio Correia

Ignacio Correia fornece texto com efeito motion blur. Quando você desce em um ritmo acelerado, o texto se desfoca em um ponto quase branco. Conforme você desacelera, as palavras se tornam menos obscuras.

Um caso para usar animação em tipografia

Estas animações tipográficas obrigam-nos a parar e desfrutar da ação. Eles são tão inspiradores e atraentes quanto animações que podem ser vistas em outros elementos, como áreas de heróis.

Infelizmente, não vemos muitos deles na natureza. Parece que todo mundo está obcecado em usar animações em tela cheia cheias de ação em vez de colocar letras simples em movimento. Mas, como vimos aqui, esses efeitos podem causar tanto impacto nos usuários.