• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 795
  • Last Modified:

jquery animation advice

Hi all,

I want to create a small semi-interactive effect on my site.

Basically I have a number of balloon pngs.

I want to create instance off the bottom of the screen and animate them up across until the are out of bounds at the top where I destroy them.

I would like to have them animate some what randomly and want to try and avoid them being spawned in the same place?

I'm just after some avice on how to do this.
  • 2
1 Solution
Julian HansenCommented:
Here is something I knocked together. Animation is achieved with one line of chained JQuery calls.

<!doctype html>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var startheight = 0;
var startwidth = 0;
$(function() {
  startheight = $(window).height() + 100;
  startwidth = $(window).width() - 100;
  setTimeout('balloon()', 500);

function randomMinMax(min,max)
    return Math.floor(Math.random()*(max-min+1)+min);

function balloon()
  var timeout = randomMinMax(250,750);
  var animationspeed = randomMinMax(2500,10000);
  var leftspace = randomMinMax(100, startwidth);
  var pos = '0px -' + (randomMinMax(0,4) * 100) + 'px';
        .css({top: startheight + 'px', left: leftspace + 'px', backgroundPosition: pos})
          {top : '-100px'}, 
          function() {
  setTimeout('balloon()', timeout);

<style type="text/css">
body, html, #balloons {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
div.balloon {
  width: 100px;
  height: 75px;
  background-image: url(images/balloons.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  position: absolute;
  top: -9999px;
  left: 90px;
<div id="balloons">

Open in new window

Working sample here
flynnyAuthor Commented:
many thanks didnt expect code, it really helped.
Julian HansenCommented:
You are welcome - thanks for the points.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now