Question

I am using this cloud effect http://solidgiant.com/2011/02/awesome-cloud-effect/ but i want to change the direction of the cloud movement. i want them to move right to left, Can anyone help me with this

i am done with the change in direction as told by Nishchay Sharma, but still one problem is there, the clouds doesnt run in loop.. they just gte stuck when they reach left side 🙁

Answer 1

In clouds.css, change:

#cloud
{
    ...
    left: 5%;
    ...
}

to

#cloud
{
    ...
    left: 80%;
    ...
}

and in clouds.js change

$("#cloud")
        .animate(
            {
                left: $("#sky").width()
            },
            cloudMoved ? 180000 : 150000,
            "linear",
            function()
            {
                $(this)
                    .css("left", parseInt($(this).css("width")))
                cloudMoved = true;
                cloudMove();
            }
        )

to

$("#cloud")
        .animate(
            {
                left: 0
            },
            cloudMoved ? 180000 : 150000,
            "linear",
            function()
            {
                $(this)
                    .css("left", parseInt($(this).css("width")))
                cloudMoved = true;
                cloudMove();
            }
        )

Do the same to $('#cloud2') and $('#cloud3'). (Change $(..).animate('left') to 0.)

Further Addtion
To get the clouds back on the other corner after they complete their animation.
For each cloudMove(), cloud2Move() and cloud3Move():

Change

.animate(
            {
                left: 0
            },
            cloud3Moved ? 400000 : 150000,
            "linear",
            function()
            {
                $(this)
                    .css("left", -parseInt($(this).css("width")))
                cloud3Moved = true;
                cloud3Move();
            }
        )

to

.animate(
            {
                left: "-"+$("#cloud").width()+"px"
            },
            cloud3Moved ? 400000 : 150000,
            "linear",
            function()
            {
                $(this)
                    .css("left", parseInt($(window).width()+'px'))
                cloud3Moved = true;
                cloud3Move();
            }
        )

Note: Don’t forget to change the left: option according to the cloud id.