0

I have got a cloud image and I want to animate it using jQuery.

I want to move the cloud image from left to right continuously. Someone can help me with this?

Thanks

Kannan
  • 829
  • 2
  • 11
  • 24
  • 5
    Is there anything in particular you are having trouble with? What have you tried? It would help if you provide the code you currently have so that we can help you fix and/or improve it. Also, [this post](http://stackoverflow.com/questions/3042092/using-jquery-animate-to-animate-a-div-from-right-to-left) may help with what you are looking for as it covers the same subject. – Zhihao May 10 '13 at 12:44
  • google word: parallax – Davor Mlinaric May 10 '13 at 12:49

2 Answers2

4

Not sure i've understood the exact animation you requested but, anyway, Try this:

HTML PART

<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:50px"/>

JAVASCRIPT/JQUERY PART

function moveRight(){
    $("#b").animate({left: "+=300"}, 2000,moveLeft)
}

function moveLeft(){
    $("#b").animate({left: "-=300"}, 2000,moveRight)
}

$(document).ready(function() {

   moveRight();

});

http://jsfiddle.net/tTman/

matteosilv
  • 585
  • 7
  • 13
  • Here the problem is we can see the image moving from right to left.What i need is to move the image continously from left to right.If the image reach the end of the div, i want the animation to start all over again from left to right.I hope you have got some idea... – Kannan May 11 '13 at 03:41
3

Use jquery spritely to get your image moving from left to right in a continouse pattern. Download the plugin, attach it your page and look at their demos to get an idea. I've used something like this in the past to move my items with spritely..

$('#trees').pan({fps: 30, speed: 2, dir: 'left'});
klewis
  • 7,459
  • 15
  • 58
  • 102