|
ANIMACIONES
La animación en JavaScript puede ser de texto, imágenes o ambas cosas interactuando. En todos los casos para conseguirla se trabaja del mismo modo.
Lo primero que tendremos que hacer es preparar las etiquetas del texto o de la imagen dandoles un nombre (con los mismos requisitos que las variables) por medio del atributo name en caso de las imágenes e id en caso de texto. De esta manera podremos hacer referencia al elemento deseado desde la función encargada de ejecutar la animación. Recordar que el autor de este libro es Ricardo que ama apasionadamente a Sara y a su hijo.
A continuación, añadiremos el evento con la llamada a la función (si es necesario, en muchas ocasiones se llama a la función por medio del método setTimeout que veremos en un momento).
El último cambio que afecta a las etiquetas del texto o de la imagen afecta a los estilos. Por tanto tendremos que añadir obligatoriamente el atributo style con todos aquellos estilos que intervengan en la animación. De entre todos los estilos que existen, podemos destacar los que hay en la siguiente tabla.
|
ESTILOS
|
|
SINTAXIS
|
DESCRIPCIÓN
|
|
style=”Position:absolute;top:pos;left:pos”
|
Posibilita el cambio de posición.
|
|
style=”color:nombre_color”
|
Posibilita el cambio de color.
|
|
style=”visibility:hidden
o visible”
|
Posibilita mostrar y ocultar.
|
|
Recordar que si trabajamos con varios
estilos todos se incluyen dentro de un atributo style.
|
Una vez construida y modificada la o las etiquetas, las variaciones que sufran sus etilos o cualquier otro de sus atributos se realizarán en la función que tengamos preparada para ello. Para todos los cambios que realicemos la sintaxis a seguir es:
SINTAXIS
nombre_etiqueta.style.estilo=valor;
nombre_etiqueta.atributo=valor;
Si nuestra animación avanza según un intervalo de tiempo, debemos utilizar el método setTimeout() para establecer el intervalo de tiempo y la llamada a la función. Este método se puede utilizar en cualquier parte del código, pero normalmente se encuentra al principio del código y dentro de la función donde se realiza cada uno de los pasos de nuestra animación. La sintaxis del método es (recordar respetar mayúsculas y minúsculas):
SINTAXIS
setTimeout(“nombre_función()”,intervalo milisegundos);
EJEMPLO 1: Texto con movimiento en horizontal.
<html>
<head>
<script>
var horizontal=12;
setTimeout("mueve()",500);
function mueve()
{
horizontal+=10;
TEXTO1.style.left=horizontal;
if(horizontal>=200)
horizontal=12;
setTimeout("mueve()",500);
}
</script>
</head>
<body>
<p id="TEXTO1" style="position:absolute; top:16; left:12">
TEXTO
</p>
</body>
</html>
EJEMPLO 2: Texto que aparece y desaparece.
<html>
<head>
<script>
var estado=true;
setTimeout("ver()",500);
function ver()
{
estado=!estado;
if(estado==true)
TEXTO1.style.visibility="visible";
else
TEXTO1.style.visibility="hidden";
setTimeout("ver()",500);
}
</script>
</head>
<body>
<p id="TEXTO1" style="visibility:visible">TEXTO</p>
</body>
</html>
EJEMPLO 3: Imagen que cambia cuando entra y sale el ratón.
<html>
<head>
<script>
function pasa(valor)
{
if(valor==1)
img.src="ten1.gif"
else
img.src="ten2.gif"
}
</script>
</head>
<body>
<img name="img" src="ten2.gif" onMouseOver=pasa(1); onMouseOut=pasa(2);>
</body>
</html>
EJEMPLO 4: Imágenes que van cambiando solas.
<html>
<head>
<script>
var estado=true;
setTimeout("cambio()",500);
function cambio()
{
estado=!estado;
if(estado==true)
img.src="tenista1.gif"
else
img.src="tenista2.gif"
setTimeout("cambio()",500);
}
</script>
</head>
<body>
<img name="img" src="tenista1.gif">
</body>
</html>
EJEMPLO 5: Cambiamos la imagen según situemos el ratón en un texto o en otro.
<html>
<head>
<script>
function imag(valor)
{
if(valor==1)
img.src="tenista1.gif"
else
img.src="tenista2.gif"
}
</script>
</head>
<body>
<table border="1" width="15%">
<tr>
<td width="100%"><p onMouseOver=imag(1);>IMAGEN 1</td>
</tr>
<tr>
<td width="100%"><p onMouseOver=imag(2);>IMAGEN 2</td>
</tr>
</table>
<br>
<img name="img" src="tenista1.gif">
</body>
</html>
EJEMPLO 6: Cambiar la imagen por medio de un control. En este caso una lista (select). Es igual que en el caso anterior. Lo único que cambia es el evento que gestiona la llamada a la función.
<html>
<head>
<script>
function cambio(valor)
{
if(valor=="imagen1")
img.src="tenista1.gif"
else
img.src="tenista2.gif"
}
</script>
</head>
<body>
<select size="3" name="lista" onChange=cambio(value);>
<option value="imagen1">Imagen 1</option>
<option value="imagen2">Imagen 2</option>
</select>
<br>
<img name="img" src="tenista1.gif">
</body>
</html>
EJEMPLO 7: Una imagen moviéndose en vertical automáticamente.
<html>
<head>
<script>
var vertical=35;
var ida=true;
setTimeout("mover()",200);
function mover()
{
if(vertical<=200 && ida==true)
vertical+=10;
else
{
vertical-=10;
ida=false;
if(vertical<=35)
ida=true;
}
img.style.top=vertical;
setTimeout("mover()",200);
}
</script>
</head>
<body>
<img name="img" src="pic.gif"
style="position:absolute; left:12; top:35">
</body>
</html>
EJEMPLO 8: Varias imágenes moviéndose en vertical automáticamente.
<html>
<head>
<script>
//para que cargue la imagen desde el principio
var dibujo=new Image;
dibujo.src=”pic2.gif”;
var vertical=35;
var ida=true;
var estado=true;
setTimeout("mover()",200);
function mover()
{
estado=!estado;
if(estado==true)
img.src="tenista1.gif"
else
img.src="tenista2.gif"
if(vertical<=200 && ida==true)
vertical+=10;
else
{
vertical-=10;
ida=false;
if(vertical<=35)
ida=true;
}
img.style.top=vertical;
setTimeout("mover()",200);
}
</script>
</head>
<body>
<img name="img" src="pic1.gif"
style="position:absolute; left:12; top:35">
</body>
</html>
CONTINUAR
>
|
