Transiciones

Descripción:

Sabias q podías poner transiciones en tu pagina web al entrar y/o al salir de ella, una transición es como una animación entre 2 paginas web utilizando HTML en los meta tags. Cuando utilizas una transición, primero sale el texto y cuando la transición termina entonces empiezan a cargarse la imágenes. Al entrar a esta pagina habrás visto un ejemplo.
 

Código:

Como utilizarlas:

El código debe ser insertado entre las directivas <head> </head>. El código consta de 3 campos editables.  Estos son http-equiv en el q controlas si la transición debe ser al salir o al entrar de la pagina, duration en el q declaras cuanto tiempo debe durar la transición (como recomendación no pondría un numero muy alto, ya q podría ser desesperante para los visitantes.) y transition en el q se elige el tipo de transición q se desea (ya las veremos mas adelante). El código de ejemplo q vemos arriba funciona al salir de la pagina, dura 3 segundos y utiliza la transición de cuadrado.

Opciones en http-equiv:

Si lo q deseas es q la pagina muestre una transición al entrar debes poner Page-Enter, si lo q quieres es q salga una transición al salir debes poner Page-Exit y si quieres ambas debes declararlas por separado, es decir:

Opciones en duration:

Esto es a tu gusto, pero (como ya dije antes) te recomiendo q sea un numero corto, suficiente para q se note el efecto, pero sin desesperar al visitante. Con 3 segundos creo q es suficiente.

Opciones en transition:

Debes cambiar la el numero a la transición q mas t guste o combine con el diseño de tu web, a continuación una lista de los numero equivalentes a la transición y una breve descripción de cada una:

1 - Cuadrado
2 - Círculo de fuera hacia dentro
3 - Círculo de dentro hacia fuera
4 - Cortina ascendente
5 - Cortina descendente
6 - Cortina de izquierda a derecha
7 - Cortina de derecha a izquierda
8 - Cortinas horizontales de izquierda a derecha
9 - Cortinas verticales de arriba a abajo
10 - Tablero de ajedrez de izquierda a derecha
11 - Tablero de ajedrez de arriba a abajo
12 - Pixelización
13 - Dos cortinas (una de izquierda al centro y otra de derecha al centro)
14 - Cortina que se despliega del centro hacia izquierda y derecha
15 - Dos cortinas (una de arriba al centro y otra de abajo al centro)
16 - Cortina que se despliega del centro hacia arriba y abajo
17 - Cortina diagonal desde arriba a la derecha hacia abajo a la izquierda
18 - Cortina diagonal desde abajo a la derecha hacia arriba a la izquierda
19 - Cortina diagonal desde arriba a la izquierda hasta abajo a la derecha
20 - Cortina diagonal desde abajo a la izquierda hasta arriba a la derecha
21 - Franjas horizontales
22 - Franjas verticales
23 - Aleatorio

 

©1998-2009 Earth Domination  | Agradecimientos por el alojamiento y el gran apoyo tecnico a: EDprox Internet Solutions