Creating scrolling images with prototype and script.aculo.us

Question

I am trying to animate images of clouds on my website to slowly move through my header, as on http://toriseye.quodis.com/ using prototype and script.aculo.us. I can't get the effect right as it is too fast, appears to rise towards the end, isn't smooth and it won't repeat after the first run. For some reason I can't post the jsfiddle.net link in the question box, so see my comment below :)

Answer 1

Firstly use transition: Effect.Transitions.linear as that will make it smooth

plus you are running the interval at 1 second (1000 milliseconds) but telling the Move Effect to last for 5 seconds - this will confuse the heck out of the javascript

Then you need to reset the position of the element you are moving - use the afterFinish callback to do so

I'm not sure the exact reason it is rising - but if you use the relative mode and just use an x parameter it does not rise

take a look at my edits to your fiddle

http://jsfiddle.net/nukt2/4/

I'm assuming your goal is multiple clouds - I would look at the Parallel Effects option so they are all running on the same timer http://madrobby.github.io/scriptaculous/effect-parallel/