Перемещение изображения случайным образом по странице
Я создал три .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 заставит их плавать намного медленнее.
Тем не менее, он работает не так, как я надеялся. Во-первых, после загрузки страницы все три аэростата (которые я изначально разместил в трех отдельных местах вдоль контейнера) сразу же всплывают в одно и то же место, и после этого они, похоже, не слишком сильно перемещаются из этого места.
Есть ли более простой и эффективный способ заставить мои три аэростатных изображения перемещаться вокруг моего контейнера случайным и реалистичным образом?
Большое спасибо, если вы можете оказать некоторую помощь!