RSS
Atom
FeedburnerThe animation that we create in this example is a simple progress bar. Above, you can see a light gray rectangle with a darker gray rectangle inside it. The darker gray bar is the progress bar that moves from left to right across the screen.
The code for this animation is below. You can copy code into an empty file with a .html extension or just download the HTML file using this link. Just right-click that link and left-click “Save Link As…” and select a location to save it to. Then double-click the file to open it with a browser.
As you can see in the code below, we define two styles: animbkgd and animbar. These are used to create div elements for the background and the progress bar, respectively. The div elements are created inside the body tag near the bottom of the file.
At the bottom of the head section, we have script tags to define the Javascript code section. We begin by defining three variables: qpBkdg, qpBar, and iWidth. The first two are used to refer to background and progress bar div sections and are set inside the Initialize() function. The third variable keeps track of the width of the progress bar.
The animation is started after the page is loaded with code
window.onload = Initialize;
that sets the Initialize() function to be the callback function for when the page loads.
When Initialize() is called, is initializes the two variables and then calls the animation loop function Loop(). The Loop() function updates the width variables and then sets itself to be called again in 20 milliseconds. That is the effect of the call
setTimeout(Loop,20);
The setTimeout() function calls a function after a specified period of time. Here, it is set to call Loop() after 20 milliseconds. So, the code creates a recursive loop where Loop() is called every 20 milliseconds to create the animation.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>XoaX.net's Javascript Recusive Animation Example</title>
<style type="text/css">
#animbkgd {
position:absolute;
width: 480px;
height: 50px;
background:#aaaaaa;
margin: 30px;
}
#animbar {
position:absolute;
width: 0px;
height: 20px;
background:#000000;
left: 0px;
top: 20px;
}
</style>
<script type="text/javascript">
/*<![CDATA[*/
var qpBkdg = null;
var qpBar = null;
var iWidth = 0;
function Loop() {
qpBar.style.width = iWidth+'px';
iWidth = ((iWidth + 1) % 480);
setTimeout(Loop,20);
}
function Initialize() {
qpBkdg = document.getElementById('animbkgd');
qpBar = document.getElementById('animbar');
Loop();
}
window.onload = Initialize;
/*]]>*/
</script>
</head>
<body>
<div id="animbkgd">
<div id="animbar">
</div>
</div>
</body>
</html>