Перемещение изображения случайным образом по странице

Я создал три .png изображения воздушных шаров. Каждый из них разных размеров, так что они испускают идею «глубины». Как лучше всего кодировать эти .png, чтобы они двигались и плавали вокруг моего контейнера, как воздушные шары?

Я попробовал следующий код с сайта Sprittle, который я адаптировал так:

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

Я поместил этот код для двух других всплывающих подсказок (# balloon1) и (# balloon2), а затем поместил их соответствующие DIV в контейнер DIV с пометкой "#sky"

Я полагал, что установка скорости до 10000 заставит их плавать намного медленнее.

Тем не менее, он работает не так, как я надеялся. Во-первых, после загрузки страницы все три аэростата (которые я изначально разместил в трех отдельных местах вдоль контейнера) сразу же всплывают в одно и то же место, и после этого они, похоже, не слишком сильно перемещаются из этого места.

Есть ли более простой и эффективный способ заставить мои три аэростатных изображения перемещаться вокруг моего контейнера случайным и реалистичным образом?

Большое спасибо, если вы можете оказать некоторую помощь!

Ответы на вопрос(2)

Ваш ответ на вопрос