Criar um efeito de texto de vapor animado

Feb 7, 2026

Como

Adicionar efeitos ao texto pode adicionar um novo nível de envolvimento e interesse. Efeitos como Tipografia cinética vai pegar a atenção de um espectador, ajuda experiência de usuário e ajudar a contar a história que está sendo informada. O efeito de texto no Fazer maravilhas site traz o Font da Web. em linha de foco por linha. Leia para descobrir como recriar algo semelhante.

Pegue o Arquivos de projeto para ajudar a seguir este tutorial.

01. Inicie o documento HTML

O primeiro passo é definir a estrutura do documento que armazenará o conteúdo HTML. Isso consiste no contêiner de documentos, que armazena as seções da cabeça e do corpo. Enquanto a seção principal armazena tintas para os recursos externos CSS e JavaScript, o corpo armazena o conteúdo visível criado na etapa 02.

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; blur text & lt; / title & gt;
& lt; link rel = "Stylesheet" tipo = "texto / css" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; corpo e gt;
  *** Etapa 2 aqui
& lt; / corpo & gt;
& lt; / html & gt;

02. Conteúdo HTML.

Esta etapa define o conteúdo HTML visível. Tome nota de como os textos designados para ter o efeito do borrão estão todos contidos dentro de um contêiner que tem a classe 'blur'. Esta classe é usada pelo JavaScript para referenciar os itens de texto no passo 03 e pelo CSS em etapas posteriores.

 & lt; H2 & gt;
  Disciplina vem de.
  & lt; ul class = "blur" & gt;
  & lt; li & gt; compromisso & lt; / li & gt;
  & lt; li & gt; perseverança & lt; / li & gt;
  & lt; li & gt; dedicação & lt; / li & gt;
  & lt; li & gt; treinamento & lt; / li & gt;
  & lt; li & gt; aspiração & lt; / li & gt;
  & lt; li & gt; educação & lt; / li & gt;
  & lt; / ul & gt;
& lt; / h2 & gt;

03. Atraso automatizado de animação

Crie um novo arquivo chamado 'code.js'. Cada item dentro do contêiner de borrão deve ser apresentado três segundos após o item anterior. O JavaScript é usado para automatizar a aplicação de atributos de CSS exclusivos. O primeiro passo disso é selecionar todos os itens de primeiro nível dentro do contêiner BLOR - após a carga ser carregada.

 janela.addeventlistener ("carregar", função () {
  var nós = document.queryselectorall (". Blur & gt; *");
  *** PASSO 4 AQUI
});

04. Número de segundos

Um loop 'for' é usado para referenciar cada item retornado à variável 'nós' na etapa anterior. O contador de índice do loop 'for' é usado para calcular o número de segundos para atribuir ao atributo de atraso de animação. Como resultado, cada item tem um atraso que é três segundos maiores que o item anterior.

 para (var i = 0; i & lt; nós.length; i ++) {
  nós [i] .Style.AnimationDelay = (i * 3) + "s";
}

05. Blur de CSS.

Crie um novo arquivo chamado 'Styles.css'. O primeiro passo para definir as regras de apresentação do CSS inicia cada um dos itens de texto como invisíveis. Uma animação chamada "animationblur" também é aplicada que anima o item em vista ao longo de uma duração de cinco segundos. O modo de animação deve ser definido como 'encaminhados' para que ele pare no último quadro.

 .blur & gt; * {
  opacidade: 0;
  Animação: Animateblur 5s para frente;
}

06. Inicie a animação

A animação aplicada aos elementos 'blur' na etapa 5 é definida nesta etapa. A referência a 'animationblur' é feita como uma animação de keyframes. O primeiro quadro 'de' define os elementos como visível com uma sombra de texto - mas com uma cor de texto transparente. Isto é o que produz o efeito de texto turva.

 @KeyFrames animateblur {
  a partir de {
  opacidade: 1;
  Sombra de texto: 0 0 1EM RGBA (0,0,0, 0,5);
  Cor: RGBA (0,0,0,0);
  }
    *** PASSO 7 AQUI
}

07. Quadro de animação final

O quadro 'to' dentro da animação define o quadro final que o texto será animado. Este quadro define a sombra de texto para desaparecer, junto com uma cor de texto totalmente visível. Combinado com o passo 06, os quadros de animação entre 'de' e 'para' serão calculados automaticamente pelo navegador.

 para {
  opacidade: 1;
  Sombra de texto: 0 0 0PX RGBA (0,0,0,0);
  cor: # 000;
}

Este artigo originalmente apareceu na revista Web Designer. Inscreva-se aqui .

Lembre-se - sempre pense no usuário

Generate - the conference for web designers

Ao introduzir efeitos extravagantes a uma página, precisa ter um propósito, você precisa estar pensando na experiência do usuário.E é isso que o desenvolvedor da UI Front-end freelance Sara Souidan estará revelando nela 'usando CSS (e SVG) para o bem da UX' Fale em Gere Londres 2018. .

Em sua conversa, ela vai mostrar uma ampla gama de possibilidades que o CSS oferece para melhorar a experiência geral do usuário da sua interface do usuário, usando CSS (com polvilha de SVG e JS aqui e lá).

Certifique-se de não perder. Obtenha seu ingresso agora.

Artigos relacionados:

Crie um efeito de texto vacilante com JavaScript
Crie um efeito de texto de néon brilhante
Como fazer o texto renderizar perfeitamente

Criar um efeito de texto de vapor animado

01. Inicie o documento HTML

02. Conteúdo HTML.

03. Atraso automatizado de animação

04. Número de segundos

05. Blur de CSS.

06. Inicie a animação

07. Quadro de animação final

Lembre-se - sempre pense no usuário

Como - Artigos mais populares

Tutorial de Arte Mídia-Mídia: Como aquarela sobre obras de arte digital

Comece com o Bulma

Como criar pinturas de ar digital plein

Criar um interior acolhedor usando linha de arte

Como esculpir os olhos convincentes no Zbrush

Como adicionar vídeo a PDFs interativos

O guia Pro para criar texturas 3D

O poder incrível da Flexbox

Categorias