Animación en javascript
Publicado por victor (3 intervenciones) el 08/06/2006 18:35:44
Vuelvo a acudir a este foro que tantas veces me ha ayudado.
Estoy experimentando un poco con javascript. Lo que me gustaría hacer ahora es una animación en plan "sencillo" con javascript.
Con eso de sencillo me refiero que tan sólo quiero dibujar una capa en medio de la pantalla y que al cargar la página se mueva un poco hacia la derechas.
He creado un ejemplo muy sencillo con la función setTimeout pero no va bien:
<html>
<head>
<style>
#capa{
position:absolute;
left:10px;
top:10px;
width:50px;
height:50px;
border:solid;
}
</style>
<script Language="javascript">
function posicio(int(lloc))
{
document.getElementById("capa").style.left=lloc+"px";
lloc=lloc+1;
if(lloc!=800)
setTimeout("posicio(lloc)",10);
}
</script>
</head>
<body onLoad=posicio(50)>
<div id="capa">Capa1</div>
</body>
</html>
Al ejecutar el programa me dice que lloc no está definido.
De todas formas, aunque esto funcionara correctamente, creo que la animación no se vería, puesto que sólo mostraría el estado inicial y el final pero no el trayecto.
En fin, alguien me podría guíar sobre como hacer una animación en javascript?
Sólo quiero hacer ese movimiento (u otro que sea igual de sencillo) después ya le echaré yo imaginación para hacer algo interesante.
Muchas gracias por adelantado.
Estoy experimentando un poco con javascript. Lo que me gustaría hacer ahora es una animación en plan "sencillo" con javascript.
Con eso de sencillo me refiero que tan sólo quiero dibujar una capa en medio de la pantalla y que al cargar la página se mueva un poco hacia la derechas.
He creado un ejemplo muy sencillo con la función setTimeout pero no va bien:
<html>
<head>
<style>
#capa{
position:absolute;
left:10px;
top:10px;
width:50px;
height:50px;
border:solid;
}
</style>
<script Language="javascript">
function posicio(int(lloc))
{
document.getElementById("capa").style.left=lloc+"px";
lloc=lloc+1;
if(lloc!=800)
setTimeout("posicio(lloc)",10);
}
</script>
</head>
<body onLoad=posicio(50)>
<div id="capa">Capa1</div>
</body>
</html>
Al ejecutar el programa me dice que lloc no está definido.
De todas formas, aunque esto funcionara correctamente, creo que la animación no se vería, puesto que sólo mostraría el estado inicial y el final pero no el trayecto.
En fin, alguien me podría guíar sobre como hacer una animación en javascript?
Sólo quiero hacer ese movimiento (u otro que sea igual de sencillo) después ya le echaré yo imaginación para hacer algo interesante.
Muchas gracias por adelantado.
Valora esta pregunta
0