Baixe em PDF
Baixe em PDF
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.
Passos
-
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] X Fonte de pesquisa [2] X Fonte 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] X Fonte de pesquisa No Chrome, o texto vai rolar pela página em vez de piscar.
-
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>.
-
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.
-
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>.
- Seu texto deve parecer com algo do tipo:
-
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] X Fonte 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>
- O código agora deve se parecer com o seguinte exemplo:
-
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 - O código completo é o seguinte:
-
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] X Fonte de pesquisa
- function pisca() {
var f = document.getElementById('anuncio');
setInterval(function() {
f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');
}, 1000);
}
- function pisca() {
-
Coloque o comando para carregar o script. 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 onload="pisca();">.
-
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.
-
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] X Fonte 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] X Fonte 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] X Fonte de pesquisa
Publicidade
Referências
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
- ↑ https://www.sitepoint.com/web-foundations/marquee-html-element/
- ↑ http://tutorial.techaltum.com/marquee.html
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
- ↑ http://stackoverflow.com/questions/8360130/how-to-make-a-text-flash-in-html-javascript
- ↑ http://javascript.info/tutorial/settimeout-setinterval
- ↑ https://www.sitepoint.com/web-foundations/marquee-html-element/
- ↑ http://caniuse.com/#feat=css-animation
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink
Sobre este guia wikiHow
Esta página foi acessada 36 020 vezes.
Publicidade
Inscreva-se na Newsletter Gratuita do wikiHow!
Receba tutoriais úteis em seu email semanalmente!
Inscreva-me!
