LOOP DE IMAGEN en JAVASCRIPT

[mensajeescrito]

Hola buena, verán tengo una duda.

Hasta ahora cuando tenia que animar un cielo con nubes de manera infinita, haciendo un loop,

(de derecha a izquierda), utilizaba una animacion hecha en flash, el problema esta en que no todo el mundo tiene flash player ni tampoco puedo obligar a que lo instalen.

Así que estoy experimentando el movimiento en javascript , y salir si sale el movimiento , pero no se como hacer un loop de movimiento en javascript.

La idea seria que cuando la imagen cruzara la pantalla de derecha a izquierda lentamente, volviera a al principio y volviera ha hacer el mismo movimiento asi todo el tiempo.

Pero claro el final de la primera imagen en su recta final de de movimiento , debe coincidir con el inicio de movimiento y el pricipio de la segunda imagen la cual empieza su movimiento tambien.

Para que no hayan saltos, no se si me he explicado bien.

O alguna idea alternativa.

Gracias de antemano.

[Crazylegs]

¿Podrías pegar el código para que veamos como lo haces?

De todas formas, para el loop de movimiento yo usaría:

Código Javascript:

//setInterval(function,milliseconds,lang(opcional))
setInterval(function(){
//Haces un if para saber cuando ha llegado al final de la pantalla
//Si ha llegado lo posicionas al principio
//sino mueves x pixeles a la izquierda
},1000)
 

Cada 1000 milisegundos(1 segundo) se ejecutaría la función.

setInterval()

[marlanga]

Pon una imagen como background de un div, repítela en el eje X, y mediante javascript modifica periódicamente el position del background sobre el eje x un poco. Si el incremento que le metas supera el ancho del width del div, no pasa nada, pero aconsejo acotarla dentro de un rango [0-width del div) para que no coja valores enormes si el script se ejecuta mucho tiempo.
http://jsfiddle.net/Zxj4e/

Código HTML:

<div id="img"></div>
 

Código CSS:

div#img { border:1px solid red; background-image:url(http://static3.wikia.nocookie.net/__cb20130516191344/mascotas/es/images/e/ea/PERROS.jpg); width:400px; height:300px; background-repeat:repeat-x; background-position:0px 0px; }
 

Código Javascript:

window.onload=function(){
    var div=document.getElementById("img");
    var pos=0;
    setInterval(function(){
        pos=(pos+3)%400;
        div.style.backgroundPosition=pos+"px 0px";
    },30);
}
 

[jarios]

Buenas:

Casualmente ayer he estado mirando esta libreria (o plugin) de jquery que permite hacer eso y mas cosas (el efecto parallax) http://spritely.net/documentation/

Espero que te sirva de algo. Si no entiendes algo dilo que yo he estado probandolo.

Saludos.