Efectos de transición entre paginas con Etiquetas Meta.

Otra de las utilidades de las etiquetas META de HTML es la realización de transiciones entre páginas. Estas transiciones permiten que, al pasar de una página a otra, se cambie de documento creando un sencillo efecto de gradiente, cortinilla, etc. como los que hemos podido ver principalmente en edición de vídeo. Estas transiciones tienen un único objetivo que es mejorar la estética de la página y no afectan para nada al funcionamiento de la misma.

Transiciones sólo son compatibles con Explorer.

Las etiquetas META de transiciones sólo son compatibles con Internet Explorer, por lo que otros navegadores no las tendrán en cuenta para nada. Es decir, simplemente las ignorarán.

Nos podremos preguntar entonces: ¿Hasta que punto se hace interesante el uso de las transiciones con etiquetas META? Pues esa respuesta depende de cada desarrollador y de sus criterios personales. Unos directamente las descartarán por no servir para mucho y por no estar presentes en la mayoría de navegadores. Otros podrán decidir utilizarlas, puesto que no afectan para nada a los programas que no las interpretan y por ofrecer algo adicional en Internet Explorer.

En mi modesta opinión, las transiciones entre páginas no son necesarias para nada y algunas son un poco feas, por lo que no acostumbro a usarlas. No obstante, las estoy explicando en este artículo de DesarrolloWeb.com para el que le apetezca utilizarlas y dar un poco de dinamismo en su página, para los usuarios de Internet Explorer. Sobretodo, tener en cuenta que transiciones muy largas pueden ser molestas más que vistosas.

Uso de las META Transition.

Las etiquetas META Transition, o META de transición, se definen con la etiqueta META, a la que se le indican dos atributos.

Atributo http-equiv:
Para indicar si la transición es para cuando se entra en la página o cuando se sale de ella.

Atributo content:

Para indicar el tipo de transición y la duración.

Un par de ejemplos de etiquetas meta de transición serían:

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

La primera define una transición cuando se entra en la página y la segunda una transición para cuando se sale de ella.

Estas etiquetas meta de transiciones se deben indicar, como cualquier otra etiqueta META, en el HEAD de la página. Pero con un detalle, si la página tiene un enlace con una hoja de estilos CSS externa, debe colocarse antes la transición de Page-Enter, si no no se verá. En general, las etiquetas META para transiciones no darán problemas si las colocamos inmediatamente después de haber iniciado el HEAD de la página.

Distintos tipos de transiciones entre páginas.

Existen diversos tipos de transiciones que se pueden aplicar con el atributo content. En este artículo de desarrollo web .com no vamos a ver todos los tipos, pero al menos sí unos cuantos. En los ejemplos utilizamos constantemente un valor duration=1, que indica la duración de la transición en segundos. Veremos varios ejemplos de transiciones:

Para hacer Transiciones de tipo degradado utilizamos content=»blendTrans(Duration=1)». Con esta transición en las que se muestran los contenidos con un fundido de menos a más. Al principio la opacidad de la página nueva es casi transparente y va cambiando hasta que se hace totalmente opaca.

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

Otra amplia gama de transiciones las podemos hacer con un valor revealTrans en el atributo content: content=»revealTrans(duration=1, transition=5)». Estos tipos de transiciones permiten mucha variedad cambiando los valores duration, que sirve para indicar la duración en segundos, y transition, que recibe un número entero con la transición que deseamos realizar. Veamos varios ejemplos:

Transición al salir de la página, de un círculo desde fuera a dentro y medio segundo de duración.

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

Transición al entrar en la página, de un cuadrado que va de dentro a fuera y de 1 segundo de duración.

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

Transición al salir de la página, que muestra la nueva página con una sucesión de pixel en lugares aleatorios, hasta que se rellenan todos los puntos de la nueva página.

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

Transición al entrar en la página, de una cortinilla que va de arriba a abajo.

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

Hasta aquí hemos visto varios tipos de transiciones, pero podemos obtener y probar por nosotros mismos otros valores de transition no tratados en este artículo de desarrolloweb.com. Obtendremos diversas transiciones, cambiando el valor transition, que permite valores enteros hasta al menos 22 transiciones distintas.

Via: Desarroloweb.com