改變動畫的方向

Question

我正在使用這個雲效果http://solidgiant.com/2011/02/awesome-cloud-effect/但我想改變雲移動的方向。我希望他們從右向左移動，任何人都可以幫助我這個

我完成了Nishchay Sharma所說的方向變化，但仍然存在一個問題，雲不能在循環中運行..他們只是GTE堅持，當他們到達左側:(

Answer 1

在clouds.css，變化：

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

到

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

和clouds.js改變

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

到

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

用同樣的方法$('#cloud2')和$('#cloud3')。 （更改$(..).animate('left')爲0）

進一步Addtion 爲了讓雲回到了另一個角落他們完成動畫後。 對於每個cloudMove()，cloud2Move()和cloud3Move()：

變化

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

到

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

注：請不要忘記根據雲ID改變left:選項。

Answer 2

變化（刪除 「 - 」 號）

.css("left", -parseInt($(this).css("width"))) 

到

.css("left", parseInt($(this).css("width"))) 

Answer 3

在你cloud.js改變cloudMove（）函數 -

function cloudMove() 
{ 
    if (!cloudMoved) 
    { 
     $("#cloud") 
      .css("left", $("#cloud").offset().left) 
    } 

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

更改計時器根據自己的喜好！

其他兩個雲只是副本 - 你可以做同樣與他們