Efectos de transición entre páginas web

Para crear efectos de transición entre las páginas de nuestro sitio web debemos agregar la siguiente metaetiqueta en la cabecera de la página web, es decir, entre las etiquetas HEAD.

Para crear un efecto de entrada, añadiremos la metaetiqueta:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=2, Transition=23)">

Si por el contrario queremos crear un efecto de salida, añadiremos la siguiente metaetiqueta:

<meta http-equiv="Page-Exit" content="revealTrans(Duration=2, Transition=23)">

Esta metaetiqueta podemos personalizarla indicando la duración en segundos del efecto (Duration) y la transición correspondiente (Transition).

A continuación os pongo la lista de efectos que podéis indicar en la propiedad Transition.

0 - Cuadro de fuera a dentro.
1 - Cuadro de dentro a fuera.
2 - Círculo de fuera a dentro.
3 - Círculo de dentro a fuera.
4 - Cortina de abajo a arriba.
5 - Cortina de arriba a abajo.
6 - Cortina de izquierda a derecha.
7 - Cortina de derecha a izquierda.
8 - Cortinillas de izquierda a derecha.
9 - Cortinillas de arriba a abajo.
10 - Cuadrados que crecen de derecha a izquierda.
11 - Cuadrados que crecen de arriba a abajo.
12 - Puntos aleatorios.
13 - Doble cortina de lados al centro.
14 - Doble cortina del centro a los lados.
15 - Doble cortina de arriba y abajo al centro.
16 - Doble cortina del centro a arriba y abajo.
17 - Cortina diagonal de arriba derecha a abajo izquierda.
18 - Cortina diagonal de abajo derecha a arriba izquierda.
19 - Cortina diagonal de arriba izquierda a abajo derecha.
20 - Cortina diagonal de abajo derecha a arriba izquierda.
21 - Líneas horizontales aleatorias.
22 - Líneas verticales aleatorias.
23 - Aleatorio (se generan aleatoriamente todos los efectos anteriores).

Podéis ver el resultado final de estos efectos haciendo clic en este enlace.

6 comentarios:

José Amorós dijo...

Últimamente no me sale nada.
He puesto el código tal y como indicas en el head, pero me sale este error:
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "meta" must be terminated by the matching end-tag "".
¿O es que este código no sirve para blogger?

No se está bien escrita porque he copiado-pegado el código.
¿Qué crees que hago mal?

José M dijo...

Hola José,

blogger no admite esta metaetiqueta, esta entrada es para páginas web.

Saludos.

José Amorós dijo...

ahh, vale.

gracias.

José M dijo...

Si quieres ver una prueba de cómo quedan esos efectos, puedes hacer clic en esta página

Carlitos dijo...

el Opera tampoco tira con eso

José M dijo...

Hola Carlitos,

es que el tema no es ver si es compatible con un navegador o con otro, está claro que hay muchos códigos o incluso simples etiquetas HTML que tienen un comportamiento diferente dependiendo el navegador que utilices.

Publicar un comentario en la entrada

Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.