Como animar texto em HTML

Escrito por brandy alexander | Traduzido por vinícius albuquerque
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como animar texto em HTML
Anime o texto para que ele se mova na página (futuregirl #4 image by Ralf Kraft from Fotolia.com)

Atraia a atenção para o conteúdo da sua página animando o texto para que ele se mova na página. Geralmente se utiliza um aplicativo gráfico ou uma linguagem de script para produzir esses movimentos. Há a opção de utilizar tags da linguagem de marcação de hipertexto (HyperText Markup Language, ou HTML). Desse modo, produz-se menos código e mantém-se um tamanho pequeno de página, a fim de que seu site carregue mais rápido no navegador. Utilize um programa editor de texto e a tag HTML "marquee" para animar o texto como quiser.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o programa editor de texto e inicie um documento HTML.

  2. 2

    Digite o conteúdo que deseja animar.

  3. 3

    Insira uma tag "<marquee>" no início do trecho de texto e uma "</marquee>" ao fim dele. Isso faz com que o conteúdo deslize horizontalmente pela página. Digite o código HTML como demonstrado a seguir:

    <marquee>Este é o trecho de texto animado.</marquee>

  4. 4

    Digite "behavior=" dentro da primeira tag e insira "Scroll" ou "Slide" depois do símbolo de igualdade para especificar como o texto se movimentará. O "Scroll" produz um movimento contínuo horizontal ou vertical, enquanto o "Slide" faz com que o conteúdo se mova na página apenas uma vez. Insira o HTML como no exemplo a seguir:

    <marquee behavior="scroll">Este é o trecho de texto animado.</marquee>

  5. 5

    Insira "direction=" depois do atributo "behavior" para definir a direção na qual o conteúdo se moverá. Digite "right" (direita), "left" (esquerda), "up" (cima) ou "down" (baixo), como abaixo:

    <marquee behavior="scroll" direction="right">Este é o trecho de texto animado.</marquee>

  6. 6

    Salve o arquivo para preservar as alterações.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível