I created three .png images of hot air balloons. Each are different sizes so that they give off the idea of "depth." What is the best way to code these .png's so that they move and float around my container like hot air balloons?

I've tried the following code from the Spritely website which I adapted as so:

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

I put this code for the other two balloons (#balloon1) and (#balloon2) and then I put their respective DIVs into a container DIV labeled "#sky"

I figured putting the speed to 10000 would make them float around a lot slower.

However, it's not functioning at all the way I had hoped. First off, once the page loads, all three balloons (which I positioned originally in three separate places along the container) immediately float to the same exact spot, and they don't seem to move much from that spot afterwards.

Is there an easier and more effective way of getting my three balloon images to move around my container randomly and realistically?

Thank you so much if you are able to provide some help!

I created three .png images of hot air balloons. Each are different sizes so that they give off the idea of "depth." What is the best way to code these .png's so that they move and float around my container like hot air balloons?

I've tried the following code from the Spritely website which I adapted as so:

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

I put this code for the other two balloons (#balloon1) and (#balloon2) and then I put their respective DIVs into a container DIV labeled "#sky"

I figured putting the speed to 10000 would make them float around a lot slower.

However, it's not functioning at all the way I had hoped. First off, once the page loads, all three balloons (which I positioned originally in three separate places along the container) immediately float to the same exact spot, and they don't seem to move much from that spot afterwards.

Is there an easier and more effective way of getting my three balloon images to move around my container randomly and realistically?

Thank you so much if you are able to provide some help!

• javascript
• jquery
• containers
• spritely

2 Answers 2

Here is an existing [partial] solution to your problem:

HTML:

<div id="container">
<div class='a'></div>
    <div class='b'></div>
    <div class='c'></div>
</div>​

CSS:

div#container {height:500px;width:500px;}

div.a {
width: 50px;
height:50px;
 background-color:red;
position:fixed;

}
div.b {
width: 50px;
height:50px;
 background-color:blue;
position:fixed;

}
div.c {
width: 50px;
height:50px;
 background-color:green;
position:fixed;

}

​ JavaScript:

$(document).ready(function() {
    animateDiv($('.a'));
        animateDiv($('.b'));
        animateDiv($('.c'));

});

function makeNewPosition($container) {

    // Get viewport dimensions (remove the dimension of the div)
    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

}

function animateDiv($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $target.animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv($target);
    });

};

function calcSpeed(prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.1;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;

}​

Live JSFiddle Demo

If anyone is interested in a jQuery plugin (forking the same functions) Easier to apply on multiple elements in the page.

HTML:

<div id="container">
   <div class='a rand'></div>
   <div class='b rand'></div>
   <div class='c rand'></div>
</div>

CSS:

div#container {height:500px;width:500px;}
div.a {
width: 50px;
height:50px;
 background-color:red;
position:fixed;
    top:100px;
    left:100px;
}
div.b {
width: 50px;
height:50px;
 background-color:blue;
position:fixed;
    top:10px;
    left:10px;
}
div.c {
width: 50px;
height:50px;
 background-color:green;
position:fixed;
    top:200px;
    left:100px;
}

jQuery plugin:

(function($) {

  $.fn.randomizeBlocks = function() {
    return this.each(function() {
            animateDiv($(this));
    });
  };

  function makeNewPosition($container) {
      // Get viewport dimensions (remove the dimension of the div)
      var h = $container.height() - 10;
      var w = $container.width() - 10;

      var nh = Math.floor(Math.random() * h);
      var nw = Math.floor(Math.random() * w);

      return [nh, nw];

  }

  function animateDiv($target) {
      var newq = makeNewPosition($target.parent());
      var oldq = $target.offset();
      var speed = calcSpeed([oldq.top, oldq.left], newq);

      $target.animate({
          top: newq[0],
          left: newq[1]
      }, speed, function() {
          animateDiv($target);
      });

  };

  function calcSpeed(prev, next) {

      var x = Math.abs(prev[1] - next[1]);
      var y = Math.abs(prev[0] - next[0]);

      var greatest = x > y ? x : y;

      var speedModifier = 0.03;

      var speed = Math.ceil(greatest / speedModifier);

      return speed;

  }

}( jQuery ));

Usage:

$(document).ready(function() {
    $('.rand').randomizeBlocks();
});

http://jsfiddle/fmvtb88d/