Como Fazer um Texto Piscar com HTML

Os textos que piscam na verdade nunca fizeram parte das funções padrões do HTML, e não há nenhuma forma usada para conseguir esse efeito que funcione em todos os navegadores. A melhor opção que usa somente HTML é a tag “marquee”, mas ela não funciona com o Google Chrome. Usar JavaScript é um método mais confiável, e você pode copiar e colar o código diretamente no seu documento HTML.

Método 1

Método 1 de 2:

Usando a tag marquee

Baixe em PDF

1
Use a tag apenas para projetos pessoais. Essa tag está obsoleta, e seu uso por desenvolvedores é fortemente desencorajado. Os textos com essa tag são exibidos de forma diferente dependendo do navegador utilizado, e as futuras atualizações podem até mesmo impedir que o texto pisque.^{[1]XFonte de pesquisa}^{[2]XFonte de pesquisa}Aprenda a usar o Javascript caso esteja criando um site profissional.
- O Google Chrome não tem suporte ao atributo "scrollamount" que esse método utiliza.^{[3]XFonte de pesquisa} No Chrome, o texto vai rolar pela página em vez de piscar.
2
Insira o texto desejado entre as tags. Abra o documento HTML em um editor de texto simples. Digite <marquee> no começo do texto. Digite </marquee> no final do texto.
- Assim como com qualquer outro documento HTML, é necessário escrever as tags básicas primeiro: <html>, <head>, e <body>.
3
Defina a largura do texto. Altere a tag inicial para <marquee width="300">. Isso não vai mudar o tamanho da fonte. Há dois motivos pelos quais talvez seja necessário alterar a largura:
- Caso o texto não caiba, ele vai ficar rolando em vez de piscar. Aumente a largura para evitar que isso aconteça.
- No Chrome, o texto rolará por uma distância determinada pela largura.
4
Defina o “scrollamount” com o mesmo valor da largura. Dentro da mesma tag, escreva scrollamount="300" (ou qualquer que seja o valor escolhido para a largura). Por padrão, o texto vai ficar rolando na página. Ao definir o “scrollamount” como tendo o mesmo número que a largura, o texto irá "rolar" na mesma posição em que ele está. Isso faz com que o texto pisque.
- Seu texto deve parecer com algo do tipo:
  <marquee width="300" scrollamount="300">Texto aqui.</marquee>.
5
Altere a velocidade da piscada. Abra o arquivo HTML em um navegador para ver o efeito. Caso o texto esteja piscando muito rápido ou muito devagar, altere a velocidade com o atributo scrolldelay="500". O valor padrão é 85.^{[4]XFonte de pesquisa} Use um número maior para o texto piscar mais lento, ou um número menor para piscar mais rápido.
- O código agora deve se parecer com o seguinte exemplo:
  <marquee width="300" scrollamount="300" scrolldelay="500">Texto aqui.</marquee>
6
Limite o número de piscadas (opcional). Muitos usuários acham que os textos piscando nas páginas são irritantes. Para interromper o efeito depois de já ter chamado a atenção do leitor, digite loop="7". Agora o texto vai piscar apenas sete vezes e desaparecer. (Você pode alterar o “7” para qualquer outro número que preferir).
- O código completo é o seguinte:
  <marquee width="300" scrollamount="300" scrolldelay="500" loop="7">Texto aqui.</marquee>
Publicidade

Método 2

Método 2 de 2:

Usando JavaScript

Baixe em PDF

1
Insira um script no início do documento HTML. Entre as tags <head> e </head> do documento HTML, insira o seguinte código JavaScript:^{[5]XFonte de pesquisa}
- function pisca() {
    var f = document.getElementById('anuncio');
    setInterval(function() {
      f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');
    }, 1000);
  }
O código acima definiu uma função com o nome "pisca". Para usar essa função no seu HTML, altere a tag <body> para <body >.
3
Define seu texto como um anúncio. O script vai afetar apenas os elementos com o id "anuncio". Coloque seu texto piscante dentro de qualquer elemento e use esse id. Por exemplo, digite <p id="anuncio">Texto aqui.</p> ou <div id="anuncio">Texto aqui.</div>.
- Você pode colocar o nome de sua preferência. Apenas lembre de usar a mesma palavra no script e no id do elemento.
4
Ajuste o script. O número "1000" no script define o tempo entre cada piscada. O valor está em microssegundos, então um valor de 1000 faz o texto piscar uma vez por segundo.^{[6]XFonte de pesquisa} Use um número menor para fazer o texto piscar mais rápido, ou um número maior para piscar mais devagar.
- O tempo real provavelmente não vai ser exatamente esse valor. Ele costuma ser ligeiramente mais curto, mas pode levar mais tempo caso o navegador esteja ocupado com outros processos.
Publicidade

Dicas

É possível ajustar a aparência do texto com o atributo “style”. Adicione o texto: style="border:solid".
Pode ser incluído um atributo de altura e de largura dentro da tag marquee, mas muitos navegadores vão ignorar o comando.^{[7]XFonte de pesquisa} É possível perceber a diferença caso tenha adicionado uma borda.
Você também pode usar animações com CSS para fazer o texto piscar. Fazer isso é bastante complicado e não é recomendado para iniciantes no CSS. Tenha em mente que será necessário vincular um documento CSS, já que o Firefox não tem suporte para animações CSS por padrão.^{[8]XFonte de pesquisa}

Avisos

Não use a tag <blink> ou a decoração de texto do CSS, já que poucos navegadores modernos oferecem suporte a eles.^{[9]XFonte de pesquisa}^{[10]XFonte de pesquisa}