Stworzyłem trzy obrazy png balonów na ogrzane powietrze. Każda z nich ma różne rozmiary, dzięki czemu wydzielają ideę „głębokości”. Jaki jest najlepszy sposób na kodowanie tych plików .png, aby poruszały się i unosiły wokół mojego kontenera jak balony na gorące powietrze?

Wypróbowałem następujący kod ze strony internetowej Spritely, który tak zaadaptowałem:

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

Umieszczam ten kod dla pozostałych dwóch balonów (# balloon1) i (# balloon2), a następnie umieszczam ich odpowiednie DIVy w kontenerze DIV oznaczonym „#sky”

Pomyślałem, że ustawienie prędkości na 10000 sprawi, że będą pływać dużo wolniej.

Nie działa jednak tak, jak się spodziewałem. Po pierwsze, po załadowaniu strony wszystkie trzy balony (które ustawiłem pierwotnie w trzech oddzielnych miejscach wzdłuż kontenera) natychmiast unoszą się w tym samym dokładnym miejscu i nie wydają się zbytnio przemieszczać z tego miejsca.

Czy istnieje łatwiejszy i bardziej skuteczny sposób, aby moje trzy obrazy balonów poruszały się po moim pojemniku losowo i realistycznie?

Dziękuję bardzo, jeśli jesteś w stanie udzielić pomocy!