Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Prácticas Javascript

Ejercicios de prácticas para crear elementos interactivos con javascript


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Imágenes II

Coche circulando

Coche en movimiento: planteamiento

En esta página haremos un sencillo efecto de animación. Sobre un fondo móvil que se repite (por ejemplo un trozo de calle), colocamos un coche. El coche es una imagen estática, pero al mover el fondo, da la impresión de que éste está recorriendo la calle.

Necesitaremos para ello en primer lugar la imagen de fondo. Imagen de fondo: fondoCoche.gif:

fondo

Por otra parte necesitamos también la imagen del coche, la cual es una imagen gif de fondo transparente, para así poder ponerla encima del fondo. Imagen del coche: coche.gif

fondo

Como hemos dicho, lo que moveremos no será la imagen del coche, sino la del fondo. Esta imagen está hecha de tal manera que los colores y dibujos del borde derecho de la misma coincide con los del borde izquierdo, de manera que si ponemos dos copìas de la imagen seguidas en horizontal, la segunda continua el dibujo de la primera.

Colocaremos dos copias seguidas de la imagen en la misma horizontal, las dos copias se mueven a la vez de derecha a izquierda, cuando la imagen de la derecha llega a la posición donde estaba la primera, volvemos repetir el ciclo. Mientras tanto la imagen del coche sigue estática encima de las imágenes móviles. Todo ello lo encuadramos dentro de un div del tamaño de una imagen de fondo, al que llamaremos visor. El visor no debe permitir ver ningún elemento que, estando dentro de él, sobresalga de su tamaño.

El truco para conseguir imágenes en movimiento está en saber utilizar los temporizadores mediante la funcion setInterval que pone en marcha el temporizador, y clearInterval que lo para. El resto consiste en cambiar la posición de la imagen mediante el control de las propiedades CSS.


Página HTML

Creamos en primer lugar la página HTML en la cual, dentro de un div "visor" metemos otros tres divs. En el primero pondremos la imagen de fondo, en el segundo repetimos la imagen de fondo, y en el tercero pondremos la imagen del coche. Cada div tiene su correspondiente etiqueta "id" para poder aplicar luego código CSS y Javascript.El código de la página será el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Mi coche</title> 
</head>
<body>
<h1>Mi coche</h1>
<div id="visor">
   <div id="fondouno">
      <img src="fondoCoche.gif" alt="fondo1" >
   </div>
   <div id="fondodos">
      <img src="fondoCoche.gif" alt="fondo2" >
   </div>
   <div id="micoche">
      <img src="coche.gif" alt="elCoche" >
   <div>
</div>
</body>
</html>

Una vez escrito el código, echamos un vistazo a la página en el navegador, y la veremos como en el siguiente enalce.

mi coche - fase 1


Como ves, todavía nos queda mucho por delante, para darle su aspecto definitivo. Continuaremos con el código CSS.


Posicionamiento y estilo

El código CSS nos permitirá posicionar las imágenes y darle el estilo a la página.

Para ello las imágenes deben tener posicionamiento absoluto respecto al div visor, de manera que los dos fondos estén en la misma horizontal, uno a continuación del otro. El primer fondo coincide con el div visor. La imagen del coche se coloca en el primer fondo.

Mediante la propiedad overflow: hidden, colocada en el visor, conseguimos que sólo se vea el primer fondo, quedando el segundo oculto. El código CSS es el siguiente:

<style type="text/css">
* { margin: 0px auto; padding: 0px; }
h1 { font:bold 1.5em arial; text-align: center; padding: 0.5em ; }
#visor { position: absolute; top: 100px; left: 200px; width: 450px; 
         height: 300px; overflow: hidden; }
#fondouno { position: absolute; top: 0px; left: 0px; }
#fondodos { position: absolute; top: 0px; left: 450px; }
#micoche { position: absolute; top: 180px; left: 120px; }
</style> 

Una vez escrito el código CSS, en el navegador veremos la página como en el siguiente enlace:

mi coche - fase 2


Como puedes observar, la segunda imagen de fondo permanece oculta. Mas adelante, al desplazar la imagen ésta irá apareciendo por la derecha, a la vez que por la izquierda va desapareciendo la primera imagen.


Código Javascript

En el código javascript en primer lugar identificamos los dos fondos de la imagen en el DOM, y después aplicamos dos temporizadores.

El primer temporizador desplaza a la vez las dos imágenes de fondo de derecha a izquierda. Para ello reducimos el valor de la propiedad CSS left en 10px en cada intervalo. Los intervalos deben ser cortos para que se produzcan unas 20 imágenes por segundo (valor: 50 ms.), esto dará sensación de movimiento.

El segundo temporizador hace que cuando la segunda imagen alcance el lugar que tenía la primera, las dos imágenes vuelvan a tener su posición original; de esta manera la imagen de fondo no desaparece. El tiempo que debemos dar es el mismo que tarda la segunda imagen en ocupar el lugar que inicialmente tenía la primera. Vemos ahora el código javascript, y después comentaremos algunos aspectos del mismo:

<script type="text/javascript">
window.onload = function() { //al cargarse la página ...
fondo1=document.getElementById("fondouno"); //referencia al primer fondo.
fondo2=document.getElementById("fondodos"); //referencia al segundo fondo
pararmover=setInterval(mover,50); //iniciar primer temporizador: movimiento
setInterval(repetir,2250); //iniciar segundo temporizador: repetición del ciclo. 
}
desplazar=0; //estado inicial del movimiento.
function mover() { //temporizador 1: movimiento
         desplazar-=10; //desplazar fondo1 -10px
         desplazar2=desplazar+450; //desplazar fondo2 a la vez
         posicion1=desplazar+"px"; //preparar para código CSS fondo1
         posicion2=desplazar2+"px"; //preparar para código CSS fondo1
         fondo1.style.left=posicion1; //cambiar posición fondo1 mediante CSS
         fondo2.style.left=posicion2; //cambiar posición fondo2
         }
function repetir() { //temporizador 2: repetir ciclo
         fondo1.style.left="0px"; //posición inicial de fondo1
         fondo2.style.left="450px"; //posición inicial de fondo2
         desplazar=0; //posicion inicial referencia de movimiento.
         }			
</script>

Aunque el código viene ya comentado vamos a ver algunos aspectos del mismo: Al principio al cargarse la página (window.onload ...) hacemos referencia en el DOM a los divs que contienen las imágenes de fondo, e iniciamos los temporizadores. Después la variable desplazar controlará el desplazamiento del fondo; la iniciamos con valor 0 (posición left del primer fondo).

La función mover() controla el primer temporizador. En ella cambiamos la propiedad CSS left de los dos fondos, para que se muestren en cada intervalo 10px más a la izquierda.

La función repetir() controla el segundo temporizador. Aquí volvemos al estado inicial de la página. es decir debemos reiniciar la posición de los dos fondos y de la variable que controla el desplazamiento.

Una vez escrito el código javascript, en el navegador veremos la página como en el siguiente enlace:

mi coche - fase 3


Por último decir que para calcular el tiempo dado al segundo temporizador en primer lugar hemos calculado las veces que debe activarse el primer temporizador para que la segunda imagen ocupe el lugar inicial de la primera, es decir ancho del fondo en px (450) dividido por px desplazados en cada intervalo (10). El resultado aquí es 45. Esto se multiplica por el tiempo dado al primer temporizador (50): 45 x 50 = 2250; que es el tiempo dado al segundo temporizador.





En la siguiente página diseñaremos una presentación de imagenes, con botones de desplazamiento.

Presentación de imágenes..



Imágenes en prácticas js.

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com