sexta-feira, 26 de setembro de 2008

Transição de páginas no Internet Explorer

Meu blog tem uma transição de páginas randômica e até simpática (eu acho :) que só funciona no Internet Explorer. Já que incentivo o uso de navegadores melhores como Firefox e Opera, nunca me importei em partilhar o código que faz mostrar essa transição, mas já que este leitor perguntou, ficarei feliz em mostrar.

Para ficar exatamente como no meu blog, o código é o seguinte e deve ser colocado entre as tags <head> e </head>:

<meta content='revealTrans(Duration=1.0,Transition=23)' http-equiv='Page-Enter'/>
<meta content='revealTrans(Duration=1.0,Transition=23)' http-equiv='Page-Exit'/>

A tradução pode parecer óbvia para os mais experientes, mas não quero deixar dúvidas:

  • Duration = duração: se quiser uma duração mais rápida você pode diminuir para 0.7, 0.5 ou qualquer outro decima que siga este padrão. Para deixar mais lento, mais simples ainda: troque 1 por qualquer outro algarismo de 1 a 9. Não recomendo, quanto mais lenta essa transição mais lento o seu site parecerá ser.
  • Transition = transição: A transição 23 é a randômica, ou seja, faz aparecer um tipo de transição diferente a cada vez que você abre o site ou sai dele usando a mesma janela.
  • Page-Enter: define qual transição será exibida ao entrar na página.
  • Page-Exit: define qual transição será exibida ao sair da página.

Meu blog é pesado para você "brincar" com este efeito antes de tentar no seu site, por isso recomendo que experimente com esta página. Nunca é demais lembrar que só funciona no Internet Explorer. Você não vai ver o efeito se usar a tecla F5. Recomendo que utilize a página "supralinkada" (inventei agora) com o site do Google Preto (para realçar o contraste) e os botões de avançar e voltar do próprio navegador.


Este é o efeito 12: Random dissolve


Este é o efeito 22: Random bars vertical

Transição só entre sites

O código acima mostra a transição entre quaisquer páginas, inclusive de um mesmo site. Se quiser que a transição só apareça entre sites e não entre páginas, ou seja, só quando mudar o domínio, o código é o seguinte:

<meta content='revealTrans(Duration=1.0,Transition=23)' http-equiv='Site-Enter'/>
<meta content='revealTrans(Duration=1.0,Transition=23)' http-equiv='Site-Exit'/>

Para usar só um dos efeitos

Eu até pensei (juro que pensei) em fazer uma página para cada um dos efeitos, mas não vai ser desta vez. Se você quiser utilizar só um deles pode ir experimentando um por um, mas dá para ter uma noção olhando o exemplo randômico e sabendo os nomes dos efeitos:

  1. Box in = Caixa/retângulo de fora para dentro
  2. Box out = Caixa/retângulo de dentro para fora
  3. Circle in = Círculo de fora para dentro
  4. Circle out = Círculo de dentro para fora
  5. Wipe up = Apaga para cima
  6. Wipe down = Apaga para baixo
  7. Wipe right = Apaga para a direita
  8. Wipe left = Apaga para a esquerda
  9. Vertical blinds = Persiana vertical
  10. Horizontal blinds = Persiana horizontal
  11. Checkerboard across = Xadrez da esquerda para a direita
  12. Checkerboard down = Xadrez de cima para baixo
  13. Random dissolve = Dissolve
  14. Split vertical in = Fecha janela na vertical
  15. Split vertical out = Abre janela na vertical
  16. Split horizontal in = Fecha janela na horizontal
  17. Split horizontal out = Abre janela na horizontal
  18. Strips left down = Abre na diagonal sentido canto inferior esquerdo
  19. Strips left up = Abre na diagonal sentido canto superior esquerdo
  20. Strips right down = Abre na diagonal sentido canto inferior direito
  21. Strips right up = Abre na diagonal sentido canto superior direito
  22. Random bars horizontal = Listras randômicas horizontais
  23. Random bars vertical = Listras randômicas verticais
  24. Random

Caso eu utilizasse apenas um efeito, seria o checkerboard:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=1.0,Transition=11)">
Exemplo de efeito

Efeito Blend

Outro efeito de transição é o Blend. Assim como o Transition, ele pode ser configurado entre páginas ou entre sites:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)"> <meta http-equiv="Page-Exit" content="blendTrans(Duration=1.0)">

Para experimentar esse efeito, você pode usar esta página. Como eu usei fundo oliva fica legal se você brincar com um site de fundo branco:

Efeito Blend
Pix meutedio arroba mail ponto com

6 comentários:

  1. Aqui no meu IE7 não rolou nada não.

    ResponderExcluir
  2. Alessandro, apesar de ser uma meta tag inventada pelo próprio Internet Explorer, o IE 7 reconhece ela como uma ameaça e, dependendo das configurações de segurança do seu navegador, esse recurso é automaticamente desativado.

    Quando eu tentei usar essa tag pela primeira vez no IE 7 ele me disse que o site não era seguro, só depois que ativei o site como seguro o Internet Explorer mostrou a transição entre as páginas.

    É por essas e outras que recomendo outros navegadores…

    ResponderExcluir
  3. Muito obrigado por sua dica e atenção Fernanda, vou tentar aqui no meu assim q reformulá-lo, sucesso e boa sorte em sua caminhada, parab´nes por seu trabalho!

    ResponderExcluir
  4. Diógenes
    bom dia, na verdade nuam consigu ativar nada no meu navegador pra mim visualizar esses meta..
    por favor mi ajudem!

    ResponderExcluir
  5. Olá, eu testei em meu blog mas não fez o efeito, será que é por causa de ser um template pronto?

    ResponderExcluir
  6. @Jessica, deve funcionar em qualquer página da web. Qual versão do Internet Explorer você está usando?

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.