Javascript Animation? - HTML Forums

Sawtooth500 · 10-15-2009, 04:34 PM

Look at: http://test6.waltonstreetwebdesign.com/

So let's say I have a transparent PNG of a hot air balloon, and on page load I want this balloon to start at the bottom of the browser window and float up to the top, and then float out the top of the frame.

Can I do this with javascript? If so, how would I even go about it?

uze · 10-18-2009, 01:08 PM

I would say it's best to use a javascript library for this sort of thing.

I personally like jQuery (http://jquery.com/).

A javascript library has lots of functions you can use to easily achieve what you would normally find very difficult writing in javascript as a beginner.

The method (function) that is useful to you in this instance is 'animate', once you have installed jQuery (really easy to do BTW), you simply need to use something like this:

HTML

Code:

<img src="balloon.png" id="theBalloon" />

CSS

Code:

body {
position:relative;
}

#theBalloon {
position:absolute;
bottom:0;
left:0;
}

Javascript (jquery syntax)

Code:

$(function() {
	$("#theBalloon").animate( { top:"-1000px"}, 1000 );
}

This will move your image from the bottom (positioned by CSS) to the top then out of the browser viewport by 1000px (you could reduce this amount).

The second parameter of 1000 on the animate function call sets the speed, 1000 may be too fast so this can be easily adjusted.

I haven't tested this but I'm sure it's a good basis for you to experiment with & get the results you want.

All the best.

UzE.