Texto em movimento na barra de estado

Vemos um simples script para fazer com que se mova um texto pela barra de estado de nosso navegador.

Por | @oficinadanet Programação
Vamos ver neste artigo como fazer para que se mova um texto pela barra de estado de nosso navegador. É um script bastante simples e corrente. Sem dúvida, pode ser fácil pegar o script, copiar em nossa página e fazê-lo funcionar, mas nós vamos procurar uma explicação para que tudo fique mais claro e entendamos um pouco o que estamos fazendo.

Este script vai criar um texto que se moverá da direita à esquerda pela barra de estado. Pode-se ver na página de exemplo. Agora vejamos os distintos passos.

1. Defino umas variáveis iniciais
O script pode mover o texto que nós desejarmos e para configurá-lo há que criar uma variável que chamamos texto_estado onde introduziremos nosso texto.

var texto_estado = "            Bem-vindo a minha página web"

Podemos notar que foram introduzidos uns espaços antes que o texto. São para que se crie um espaço na barra de estado entre a saída do texto e a entrada deste pelo outro lado. O número de espaços em branco pode ser modificado livremente, assim como o texto que se mostra.

Também será necessário criar uma variável chamada posição onde vamos salvar a posiç/ao do texto na barra de estado.

var posicao = 0

2. Função para mover o texto
Agora vamos ver a função, a qual chamaremos move_texto(), que se encarrega de mover o texto pela barra de estado. Entender esta função pode ser um pouco complexo se não se conhece um pouco a linguagem Javascript. De qualquer forma, podemos também copia-la e cola-la em nossas páginas embora não consigamos entender. Realiza quatro ações básicas:

    * Move a posição atual, atualizando a variável posição. Se chegarmos ao final da cadeia, volta-se ao princípio
      if (posicao < texto_estado.length)
          posicao ++;
      else
          posicao = 1;
    * Cria uma cadeia a partir do texto original. A cadeia criada contém o texto que existe desde a posição atual até o final concatenado com o que há desde o princípio até a posição atual. Este é o passo que realmente gera o movimento, porque vai mudando a cadeia que logo escreveremos à medida que a posição também muda.
      string_atual = texto_estado.substring(posicao) + texto_estado.substring(0,posicao)
    * Escreve a cadeia resultante da operação anterior na barra de estado.
      window.status = string_atual
    * A função chama-se a si mesma para continuar o movimento. Para isso, utiliza-se uma função muito socorrida, setTimeout(), que serve para executar uma sentença com atraso de tempo. A função recebe a sentença para executar (que neste caso, é uma chamada a mesma função) e o número de milésimos de segundos que tem que esperar para executa-la, neste caso 50.
      setTimeout("move_texto()",50)

A função inteira tem este código:

function move_texto(){
   if (posicao < texto_estado.length)
       posicao ++;
   else
       posicao = 1;
   string_actual = texto_estado.substring(posicao) + texto_estado.substring(0,posicao)
   window.status = string_atual
   setTimeout("move_texto()",50)
}


3. Chamamos à função
Para começar a mover o texto pela página temos que realizar uma chamada à função que se encarrega disso. Será mais claro o código da página se colocarmos a chamada à função depois que tiver sido definida, embora não seja obrigatório.

move_texto()

4. Tudo junto
Para acabar, podemos observar a seguir o código inteiro de uma página web que move texto pela sua barra de estado. É um página bastante simples depois de tudo.



   Texto ena barra de estado
  



Exemplo de script com um texto na barra de estado






Pode-se ver o exemplo em funcionamento.

5. Outro exemplo
Dependendo do script que utilizarmos para mover o texto da barra de estado conseguiremos uns efeitos ou outros. A seguir podemos ver um segundo exemplo sobre como mover um texto pela barra de estado utilizando um efeito de movimento distinto.

Não vamos comentar este segundo exemplo porque já se encontra comentado no próprio código fonte, mas poderemos ver que é muito parecido ao anterior.



   Segundo exemplo de texto em movimento



Texto em movimento na barra de estado


Exemplo 2





Mais sobre:
Share Tweet
DESTAQUESRecomendado
Mais compartilhados
Comentários