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.

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);

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″>

JAVASCRIPT

</p>

</body>

</html>

Ejemplo 2: Imagen que cambia cuando el cursor esta sobre ella

<html>
<head>
<script>
function pasa(valor)
{
if(valor==1)
img.src=”tenis.jpg”
else
img.src=”tenis2.jpg”
}
</script>
</head>
<body>
<img name=”img” src=”tenis2.jpg” onMouseOver=pasa(1); onMouseOut=pasa(2);>
</body>
</html>

debe contar con las imagenes

Dejar un comentario

Be the first to comment!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback URI

A %d blogueros les gusta esto: