Transições de página com etiquetas META

As etiquetas META servem também para especificar transições entre páginas, só para Explorer.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 13/7/09
Valorize este artigo:
Outra das utilidades das etiquetas META de HTML é a realização de transições entre páginas. Estas transições permitem que, ao passar de uma página a outra, se mude de documento criando um simples efeito de gradiente, cortininha, etc. como os que pudemos ver principalmente em edição de vídeo. Estas transições têm um único objetivo que é melhorar a estética da página e não afetam nada ao funcionamento da mesma.

Transições só são compatíveis com Explorer

As etiquetas META de transições só são compatíveis com Internet Explorer, por isso os outros navegadores não as terão em conta para nada. Ou seja, simplesmente as ignorarão.

Poderemos nos perguntar então: Até que ponto se torna interessante o uso das transições com etiquetas META? Pois essa resposta depende de cada desenvolvedor e de seus critérios pessoais. Algumas pessoas diretamente as descartarão por não servir para muito e por não estar presentes na maioria de navegadores. Outras poderão decidir utilizá-las, visto que não afetam em nada aos programas que não as interpretam e por oferecer algo adicional em Internet Explorer.

Na minha modesta opinião, as transições entre páginas não são necessárias para nada e algumas são um pouco feias, por isso não costumo usá-las. Não obstante, as explico neste artigo de CriarWeb.com para os que queiram utilizá-las e dar um pouco de dinamismo em sua página, para os usuários de Internet Explorer. Sobretudo, ter em conta que transições muito longas podem ser mais incômodas que vistosas.

Uso das META Transition

As etiquetas META Transition, ou META de transição, se definem com a etiqueta META, a que se indicam dois atributos.

Atributo http-equiv:
Para indicar se a transição é para quando se entra na página ou quando se sai dela.

Atributo content:

Para indicar o tipo de transição e a duração.

Um par de exemplos de etiquetas meta de transição seria:

<meta http-equiv="Page-Enter" content="blendTrans(duration=1)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=0.5, transition=5)">


A primeira define uma transição quando se entra na página e a segunda uma transição para quando se sai dela.

Estas etiquetas meta de transições se devem indicar, como qualquer outra etiqueta META, no HEAD da página. Porém com um detalhe, se a página tiver um link com uma folha de estilos CSS externa, deve se colocar antes a transição de Page-Enter, senão não se verá. Em geral, as etiquetas META para transições não darão problemas se as colocarmos imediatamente depois de ter iniciado o HEAD da página.

Distintos tipos de transições entre páginas

Existem diversos tipos de transições que se podem aplicar com o atributo content. Neste artigo de criarweb.com não vamos ver todos os tipos, porém pelo menos sim alguns quantos. Nos exemplos utilizamos constantemente um valor duration=1, que indica a duração da transição em segundos. Veremos vários exemplos de transições:

Para fazer Transições de tipo degrade utilizamos content="blendTrans(Duration=1)". Com esta transição nas que se mostram os conteúdos com um fundido de menos a mais. Ao princípio a opacidade da página nova é quase transparente e vai mudando até que se torna totalmente opaca.

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

Podemos fazer outra ampla gama de transições podemos com um valor revealTrans no atributo content: content="revealTrans(duration=1, transition=5)". Estes tipos de transições permitem muita variedade mudando os valores duration, que serve para indicar a duração em segundos, e transition, que recebe um número inteiro com a transição que desejamos realizar. Vejamos vários exemplos:

Transição ao sair da página, de um círculo desde fora para dentro e meio segundo de duração.

<meta http-equiv="Page-Exit" content="revealTrans(duration=0.5, transition=2)">

Transição ao entrar na página, de um quadrado que vai de dentro para fora e de 1 segundo de duração.

<meta http-equiv="Page-Enter" content="revealTrans(duration=1, transition=1)">

Transição ao sair da página, que mostra a nova página com uma sucessão de pixel em lugares aleatórios, até que se preencham todos os pontos da nova página.

<meta http-equiv="Page-Exit" content="revealTrans(duration=1, transition=12)">

Transição ao entrar na página, de uma cortininha que vai de cima a abaixo.

<meta http-equiv="Page-Enter" content="revealTrans(duration=1, transition=5)">

Ate aqui vimos vários tipos de transições, porém podemos obter e provar por nós mesmos outros valores de transition não tratados neste artigo de criarweb.com. Obteremos diversas transições, mudando o valor transition, que permite valores inteiros até pelo menos 22 transições distintas.

Para que se possa ver isto das transições, deixamos um exemplo de transição.

Nota: Lembrar que as transições só se verão em Internet Explorer.

Só faltaria dizer que se uma página tem transição de entrada e de saída, a transição de saída só se verá no caso em que a página que se vá mostrar não tenha definida uma transição de entrada. No caso de ter uma, se veria a transição de entrada da nova página ao invés da de saída da página de onde viemos.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato