10 incríveis trechos de código CSS e JavaScript de texto animado

Você pode fazer alguns efeitos de texto deslumbrantes com CSS básico e algumas linhas de JavaScript. Esses efeitos variam de animações de exibição de texto a rotações 3D ou qualquer outra coisa que você possa imaginar.

E neste post eu cataloguei 10 dos exemplos mais legais da web mostrando o que você pode fazer com apenas um pouco de texto estilizado e código CSS.

Você também pode gostar dessas ferramentas de animação CSS.

1. Animação do título

Este efeito de título animado de Robin Treur segue o estilo de muitos filmes ou videogames. As letras assumem um efeito 3D saliente usando sombras de texto CSS3 junto com uma ligeira inclinação diagonal.

O estilo de animação fade-in me lembra os filmes clássicos da década de 1930 com o mesmo texto inclinado. Tudo é controlado por CSS, mas o botão “reiniciar” é construído usando JavaScript. Dessa forma, você pode reproduzir a animação várias vezes para obter uma aparência melhor.

2. Quebrando

Criar texto quebrado é uma tarefa simples com ferramentas como o After Effects, mas criar uma animação de texto quebrado com código é muito mais difícil, tornando esta caneta de Arsen Zbidniakov bastante impressionante.

Na verdade, o texto é construído usando formas SVG, o que torna o processo de animação um pouco mais fácil. Isso também significa que você não pode selecionar, copiar ou interagir com o texto normalmente.

Mas você pode adicionar um efeito semelhante ao seu site se o usar para um logotipo ou outro elemento de página não interativo.

3. Letras torcidas

O desenvolvedor Mamun Khandaker montou esta coleção de animações de letras torcidas. Cada estilo de animação tem um nome diferente e você pode navegar por todos eles nesta caneta.

Eu pude ver esses efeitos de texto usados ​​em landing pages ou homepages para uma ferramenta/webapp. Estes chamam imediatamente a atenção e deixam uma impressão duradoura no visitante. Além disso, todos eles são feitos com CSS 100% puro e super fáceis de ajustar.

4. Alfabeto de Pixel

Este efeito de pixel animado exclusivo é definitivamente estranho, mas estranhamente fascinante. Ele se baseia principalmente em JavaScript e foi criado pelo desenvolvedor Georgi Nikoloff como uma maneira de brincar com o elemento canvas HTML5.

Ele usa Noto Serif como base de fonte e converte letras em elementos maleáveis ​​dentro do elemento canvas. JavaScript quebra as letras em pontos menores e estes formam a base da animação.

Não posso dizer que isso teria muito uso prático, mas é uma prova de quão longe a animação na web chegou.

5. Carrossel de Digitação

Esse efeito é notoriamente popular em pequenos portfólios e sites de agências. A animação de texto de digitação geralmente aparece no cabeçalho de um site e imita a aparência de alguém digitando em um processador de texto.

Tudo está contido dentro de um elemento com uma boa mistura de animação CSS e JavaScript. Às vezes, você verá sites usarem isso para listar descrições de seu trabalho, ou seu histórico, ou clientes com os quais trabalharam.

É definitivamente um efeito divertido quando usado com moderação . Como apenas uma palavra é visível por vez, isso limita a legibilidade da página, mas quando usado com moderação, esse é um efeito muito legal que qualquer um pode copiar.

6. Tigre Tigre

Emprestando palavras do poema de William Blake “The Tyger”, esta animação única de Joseph Martucci realmente chama sua atenção.

O foco aqui não é tanto no conteúdo, mas nos estilos tipográficos e nas animações. Cada “segmento” do texto tem seu próprio estilo com contornos de texto e efeitos brilhantes. É um ótimo exemplo de como você pode estilizar uma página inicial para animar texto sequencialmente usando setTimeout() .

7. Encaixe SVG

A biblioteca Snap.svg de código aberto permite que qualquer pessoa crie imagens SVG de alta resolução com apenas um pouco de código. Isso é muito mais fácil do que aprender um programa como o Illustrator e permite animar exatamente como este exemplo divertido criado por Alexis Blondin.

Todas as letras são criadas dinamicamente através de JavaScript incluindo os caracteres aleatórios usados ​​na animação. O suporte moderno a SVG é enorme e esses tipos de imagem podem mudar radicalmente a forma como construímos sites nos próximos anos. Esta animação Snap.svg é apenas um exemplo e é definitivamente legal.

8. Animação de colchetes

Aqui está outra técnica de animação de texto bastante comum que vejo o tempo todo. Ele usa colchetes com texto giratório quase como um rolodex na página.

Esta animação imita o efeito de carrossel de digitação que mencionei anteriormente, exceto que isso pode ser feito apenas com CSS. Ele se baseia em uma animação em loop personalizada que se move de um quadro-chave CSS para outro, cada quadro exibindo uma palavra ou frase diferente no texto giratório.

Acho esse efeito muito mais sutil e fácil de ler em uma página inicial. Se você está procurando alguns efeitos de texto interessantes para sua página inicial, esta seria uma excelente escolha.

9. Inquebrável Kimmie Schmidt

Este doce efeito de logotipo foi emprestado da série Netflix “Unbreakable Kimmie Schmidt”. Tudo é criado com CSS, incluindo os estilos de texto e as animações personalizadas.

O corpo da página tem uma classe que inicia a animação, e essa classe é anexada à página usando JavaScript. A partir daí é tudo CSS puro. Ele usa principalmente um monte de transformações para criar o efeito de salto surpreendentemente realista.

É mais um exemplo do quanto o CSS3 pode fazer se você souber como usá-lo.

10. Preenchendo Texto SVG

Por fim, chegamos a essa animação de preenchimento SVG muito exclusiva usando uma mistura de sombras de caixa e a propriedade de traço CSS.

Este texto é construído inteiramente com SVGs, mas também é selecionável para que você possa copiar/colar letras como texto normal. É totalmente compatível com todos os navegadores e a animação é sutil o suficiente para caber em qualquer site.

Todas essas animações de texto trazem algo novo para a mesa. Você pode não achar todos eles práticos ou utilizáveis ​​em seu próprio trabalho, mas eles provam que quase tudo é possível com a abordagem correta.