Changer la direction de l'animation

Question

J'utilise cet effet de nuage http://solidgiant.com/2011/02/awesome-cloud-effect/ mais je veux changer la direction du mouvement du nuage. Je veux qu'ils se déplacent de droite à gauche, Quelqu'un peut-il m'aider avec ce

je suis fini avec le changement de direction comme dit par Nishchay Sharma, mais encore un problème est là, les nuages ​​ne fonctionne pas en boucle .. ils gte coincé quand ils atteignent le côté gauche :(

Answer 1

En clouds.css, le changement:

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

à

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

et à clouds.js changer

$("#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(); 
      } 
     ) 

Faites la même chose à $('#cloud2') et $('#cloud3'). (Changer $(..).animate('left') à 0.)

De plus addtion Pour obtenir les nuages ​​en arrière sur l'autre coin après avoir terminé leur animation. Pour chaque cloudMove(), cloud2Move() et cloud3Move():

changement

.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(); 
      } 
     ) 

Note: Ne pas oublier de changer l'option left: selon l'id nuage.

Answer 2

changement (enlever signe "-")

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

à

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

Answer 3

Dans votre cloud.js changer la fonction 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(); 
      } 
     ) 
} 

Modifier les minuteries à votre goût!

Les deux autres nuages ​​ne sont que des copies - vous pouvez faire la même chose avec eux