Crie um efeito de texto vacilante com JavaScript

Feb 6, 2026

Como

A screenshot from Patrick Heng's website including moving typography

A introdução de efeitos ao texto e tipografia pode adicionar uma nova perspectiva ao experiência de usuário em um site. Mas o texto deve ser lido e ficar muito inteligente ou inteligente com efeito pode derrotar o propósito disso.

Então seja inteligente, seja inteligente, mas certifique-se de que você Tipografia cinética efeito realmente funciona, assim como acontece em Patrick Heng's Website - Destaque na imagem acima. Leia mais para descobrir como...

1. Crie o texto da introdução

Abra o Arquivos de projeto E você verá que há a biblioteca Velocity.js e Blast.js. Blast divide o texto para cima, enquanto a velocidade é um motor entre Existem três variáveis de deslocamento para tornar cada peça de texto em intervalos diferentes.

 & lt; script & gt;
var offset1 = 0;
var offset2 = 0;
var offset3 = 0;
& lt; / script & gt;

2. Divida o texto

Usando a explosão, cada um dos caracteres de texto é dividido em seu próprio elemento de extensão. Em seguida, a camada superior do texto está em loop e o deslocamento é aumentado para cada letra, então eles animam de forma independente.

 $ ("H1"). Blast ({
  delimitador: "personagem"
});
function anim () {
  var $ spans = $ ("# top"). Encontre ('span');
  $ spans.each (função () {
  offset1 + = 40;

3. Adicione velocidade

Agora a biblioteca de velocidade adiciona o movimento e opacidade para que as letras se movam e desapareçam. Cada letra é compensada e a duração e a facilitação são definidas para cada uma das letras.

 $ (isto) ..velocity ({
  Traduie: -100,
  Opacidade: 1.
  }, {
  Atraso: offset1,
  Duração: 800,
  Facilitando: "EaseoutBack"
  });
  });
}

4. Chame a ação

Agora a função 'Anim' é chamada e isso desencadeia a animação para começar. Uma função 'SetTimeout' agora estremece o segundo bloco de texto que será amarelo. Mais uma vez, é desencadeada usando velocidade como no primeiro exemplo.

 anim ();
SetTimeout (função () {
  var $ spans = $ ("# meio"). Encontre ('span');
  $ spans.each (função () {
  offset2 + = 40;
  $ (isto) .velocity ({
  Traduie: -100,
  Opacidade: 0.8.
  }, {

5. Mova-se

O atraso, a duração e a facilitação são definidos para que o segundo texto amarelo se mova corretamente. Em seguida, o último texto que é laranja é controlado na próxima função 'SetTimeout' para atrasar isso em movimento um pouco mais antes de começar.

 Atraso: Offset2,
  Duração: 800,
  Facilitando: "EaseoutBack"
  });
  });
}, 100);
SetTimeout (função () {
  var $ spans = $ ("# inferior"). Encontrar ('span');

6. Adicione letras finais

Agora as letras finais são movidas para o lugar. Isso dá o mesmo efeito que Patrick Heng's Site , que tem camadas de texto em movimento. Patrick realmente usa WebGl para mover o texto, mas isso é uma maneira mais simples com os elementos DOM.

 $ spans.each (função () {
  offset3 + = 40;
  $ (isto) .velocity ({
  Traduie: -100,
  Opacidade: 0.8.
  }, {
  Atraso: Offset3,
  Duração: 800,
  Facilitando: "EaseoutBack"
  });
  });
}, 150);

Saiba mais em Generate London

Generate graphic — Veja Richard Rutter, Sarah Parmenter e Bruce Lawson, e mais conversa em Generate London 2018

Richard Rutter tem um amor e fascínio por tipografia e co-fundada Fontdeck. , um serviço de fonte web pioneiro. Como tipografia auto-nomeada, evangelista, Richard é organizador principal do Clepleft Ampersand. Conferências de tipografia da Web.

Na Generate London 2018, seu workshop irá ajudá-lo a criar sites com tipografia de web envolvente, apropriada, distintiva, expressiva, expressiva e legível, que se adapta para telas de todas as formas e tamanhos. Você aprenderá como combinar o Centuries-Old Craft com tecnologia de ponta - incluindo fontes variáveis - para projetar e desenvolver as melhores experiências para seus leitores.

Ao longo de um dia, você participará de atividades práticas, aplicando cada nova técnica a um site de exemplo detalhado que você pode retribuir com você. Isso formará o recurso perfeito para você se referir no futuro. E se isso não for suficiente, todo participante irá embora com uma cópia eletrônica livre de Richard aclamado Livro de tipografia Web. .

Não perca, pegue o seu ingresso agora

Artigos relacionados:

Javascript perfeito em 1.000 projetos
Pontas do tipo digital pro para designers gráficos
7 recursos de tipo de web

Crie um efeito de texto vacilante com JavaScript

1. Crie o texto da introdução

2. Divida o texto

3. Adicione velocidade

4. Chame a ação

5. Mova-se

6. Adicione letras finais

Saiba mais em Generate London

Como - Artigos mais populares

17 dicas para desenhar rostos mangá

Use Brain.js para construir uma rede neural

Como criar uma página em quadrinhos

Construa protótipos com o Adobe XD

Como pintar arte de animação colorida no Photoshop

Designer de afinidade: Como usar restrições

Como usar texturas no Photoshop

Acelerar o seu fluxo de trabalho de textura

Categorias