<body>
</body>
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
div.balloon {
width: 100px; /* width of our sprite */
height: 75px; /* height of our sprite */
background-image: url(images/balloons.png); /* path to sprite */
background-position: 0 0; /* default sprite to first */
background-repeat: no-repeat; /* don't repeat this image */
position: absolute; /* necessary to be able to position our sprite */
top: -9999px; /* start it off the page somewhere - probably redundant */
}
$('<div/')
2. Assign the balloon class to this div
$('<div/')
.addClass('balloon')
4. Randomly select which balloon colour to create
$('<div/')
.addClass('balloon')
.css({top: startheight + 'px', left: leftspace + 'px', backgroundPosition: pos})
6. Animate the balloon towards the top of the screen at a random speed
$('<div/>')
.addClass('balloon')
.css({top: startheight + 'px', left: leftspace + 'px', backgroundPosition: pos})
.animate(
{top : '-100px'}, // Animate until top is 100px above top of screen
animationspeed, // At this rate
function() {
$(this).remove(); // When done, remove the balloon
}
)
$('body')
.append(
$('<div/>')
.addClass('balloon')
.css({top: startheight + 'px', left: leftspace + 'px', backgroundPosition: pos})
.animate(
{top : '-100px'},
animationspeed,
function() {
$(this).remove();
}
)
);
9. Schedule the next balloon creation.
setTimeout('balloon()', timeout);
// WE ADD 100 TO START BALLOON BELOW THE SCREEN
startheight = $(window).height() + 100;
// WIDTH OF THE SCREEN SO WE KNOW WHERE TO POSITION
// THE BALLOON. WE SUBTRACT THE 100 SO THAT THE BALLOON
// LEFT POSITION IS NOT THE WIDTH OF THE SCREEN AND
// THEREFORE OF RIGHT EDGE.
startwidth = $(window).width() - 100;
We then need some variables that are created for each new ballloon.
// TIMEOUT BETWEEN CREATING BALLOONS
// OUR CREATION WINDOW IS BETWEEN 250ms
// AND 750ms
var timeout = randomMinMax(250,750);
// ANIMATIONSPEED - HOW FAST WE WANT THE BALLOON
// TO RISE. THE SMALLER THE VALUE THE QUICKER THE
// ASCENT. HERE WE WANT VALUES BETWEEN 2.5s AND 10s
var animationspeed = randomMinMax(2500,10000);
// WHERE TO PUT THE BALLOON ON THE SCREEN RELATIVE
// TO THE LEFT MARGIN OF THE SCREEN. WE START AT 100
// FOR THE SAME REASON WE SUBTRACT 100 FROM THE
// STARTWIDTH VARIABLE (SEE ABOVE)
var leftspace = randomMinMax(100, startwidth);
// WHICH SPRITE TO USE. THIS IS A BACKGROUND-POSITION
// STRING TO MOVE THE SPRITE IMAGE UP TO THE REQUIRED
// BALLOON POSITION.
var pos = '0px -' + (randomMinMax(0,4) * 100) + 'px';
function randomMinMax(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
<!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;
balloon();
});
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';
$('body')
.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 {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
div.balloon {
width: 75px;
height: 100px;
background-image: url(images/balloons.png);
background-position: 0 0;
background-repeat: no-repeat;
position: absolute;
top: -9999px;
left: 90px;
}
</style>
</head>
<body>
</body>
</html>
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)