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
|