[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 773
  • 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.
0
flynny
Asked:
flynny
  • 2
1 Solution
 
Julian HansenCommented:
Here is something I knocked together. Animation is achieved with one line of chained JQuery calls.

<!doctype html>
<html>
<head>
<title>Test</title>
<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';
  $('#balloons')
    .append( 
      $('<div/>')
        .addClass('balloon')
        .css({top: startheight + 'px', left: leftspace + 'px', backgroundPosition: pos})
        .animate(
          {top : '-100px'}, 
          animationspeed,
          function() {
            $(this).remove();
          }
        )
    );
  
  setTimeout('balloon()', timeout);
}

</script>
<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;
}
</style>
</head>
<body>
<div id="balloons">
</div>
</body>
</html>

Open in new window

Working sample here
balloons.png
0
 
flynnyAuthor Commented:
many thanks didnt expect code, it really helped.
0
 
Julian HansenCommented:
You are welcome - thanks for the points.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

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