Moving An Image Randomly Around A Page

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

Solution 1:

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

HTML:

<divid="container"><divclass='a'></div><divclass='b'></div><divclass='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'));

});

functionmakeNewPosition($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];

}

functionanimateDiv($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);
    });

};

functioncalcSpeed(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

Solution 2:

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

HTML:

<divid="container"><divclass='a rand'></div><divclass='b rand'></div><divclass='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() {
    returnthis.each(function() {
            animateDiv($(this));
    });
  };

  functionmakeNewPosition($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];

  }

  functionanimateDiv($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);
      });

  };

  functioncalcSpeed(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.net/fmvtb88d/