Moving an image randomly around a page

Question

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!

score 11 · Accepted Answer · answered Dec 09 '12 at 04:51

11

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

answered Dec 09 '12 at 04:51

Zeb Rawnsley

2,210
1
21
33

I tried this sort of approach when I asked a similar question yesterday, but when I put all of this into Dreamweaver and preview, nothing animates. I literally copied and pasted all of this into the editor just to test it out. When I view it on JSFiddle, it looks like what I want to do. But, like I said, when I paste it into Dreamweaver and preview, nothing animates. Do I need a certain kind of jQuery version? Am I missing something? – James Barracca Dec 09 '12 at 04:54
I see, you are the very same person that asked the last question - why didn't you update your previous question? -- What version of jQuery are you running. Having the jsFiddle is proof of concept so there must be something wrong with your environment. – Zeb Rawnsley Dec 09 '12 at 04:56
Sorry, I'm new to this website so I'm sorry if I didn't follow the protocol. Anyways, I'm running jquery-1.8.0.js – James Barracca Dec 09 '12 at 05:05
I tested this down to jQuery 1.2 and it worked fine, so we need to know more about your environment. Have you opened up the console to check for errors with the code provided? Are you including jQuery before calling this script? Are you loading jQuery async? There are so many unknowns here. It should work. – Zeb Rawnsley Dec 09 '12 at 05:07
I accepted it because technically, since it works on jsFiddle, it's a correct solution. But let's see about my environment. What do you mean by "am I including jQuery before calling this script?" I pasted the script in between a tags. – James Barracca Dec 09 '12 at 05:24
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/20825/discussion-between-james-barracca-and-zeb-rawnsley) – James Barracca Dec 09 '12 at 05:27
Zeb, I was looking for a way to chat with you again or at least ask you a question, but I couldn't find a way to do it without just commenting here because they froze our previous chat. If you're around, I could use your assistance! Thanks man, and hope all is well. – James Barracca Jan 07 '13 at 20:47
I've sent an email using the contact page on your site with my details – Zeb Rawnsley Jan 07 '13 at 23:56

score 0 · Answer 2 · answered Mar 03 '16 at 12:13

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

Moving an image randomly around a page

2 Answers2

Linked