Ich habe drei PNG-Bilder von Heißluftballons erstellt. Beide sind unterschiedlich groß, so dass sie die Idee der "Tiefe" ausstrahlen. Wie kann ich diese .png-Dateien am besten so codieren, dass sie sich bewegen und wie Heißluftballons um meinen Container schweben?

Ich habe den folgenden Code von der Spritely-Website ausprobiert, den ich so angepasst habe:

$('#balloon1')
  .sprite({fps: 3, no_of_frames: 1})
  .spRandom({
      top: 70,
      left: 100,
      right: 200,
      bottom: 340,
      speed: 10000,
      pause: 3000
  });

Ich habe diesen Code für die beiden anderen Sprechblasen (# balloon1) und (# balloon2) eingegeben und dann die entsprechenden Divs in einen Container mit der Bezeichnung "#sky" gelegt.

Ich dachte, die Geschwindigkeit auf 10000 zu bringen würde sie viel langsamer herumschweben lassen.

Es funktioniert jedoch überhaupt nicht so, wie ich es mir erhofft hatte. Zunächst einmal schweben alle drei Ballons (die ich ursprünglich an drei verschiedenen Stellen entlang des Containers positioniert habe) nach dem Laden der Seite sofort genau an der gleichen Stelle, und sie scheinen sich danach nicht viel von dieser Stelle zu bewegen.

Gibt es eine einfachere und effektivere Möglichkeit, meine drei Ballonbilder zufällig und realistisch um meinen Container zu bewegen?

Vielen Dank, wenn Sie Hilfe leisten können!