Easy Java Script Animation
By Stephen Bucaro
There are many ways to create an animation; Adobe Flash, Video, and animated GIF
are just a few. But the simplest way, with the most control, is to use Java Script
along with CSS (Cascading Style Sheets). In this article, I show you how to create
simple Java Script animations.
Animation works because of a principle called "persistence of vision". Persistence of
vision is the phenomenon an image persisting on the retina of the eye, or in the brain,
for approximately one twenty-fifth of a second. If you change the image faster than
that, the images appear to blend together.
There are two kinds of animation, frame animation and sprite animation.
Frame animation is nothing more than a fast slide show. You create a set of slides or
frames with a small change in each frame. When the frames are displayed in
quick succession, the changes appears as motion.
Sprite animation is when you move one image, referred to as a sprite over a
background image. A sprite is a rectangular image, but the parts of the image where
you want the background to show through are made transparent. One sprite can move in
front of another sprite. The sprite closest to the viewer has the highest z-order.
Sprite images themselves can be small frame animations moving over a background.
A complete animation would be animated spites moving over a scrolling background.
The example that I present here uses simple non-animated sprites. It is possible to
create animated sprites with Java Script, but I leave that for a future article.
If you want to follow along with this example, create a basic web page and type
in, or cut and paste, the code provided. You can create a basic web page using Windows
Notepad. The code for a basic web page is shown below. Save your file with any
name and the file extension .htm.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Note, in the code shown above that the web page has two sections, the head and the
body. Next enter the code shown below into the file:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#viewport
{
position:relative;
left:0px;
top:0px;
width:480px;
height:300px;
border-style:solid;
background-image:url('clouds.jpg');
}
#ball
{
position:absolute;
left:100px;
top:100px;
}
</style>
</head>
<body>
<div id="viewport"><img id="ball" src="ball.gif" /></div>
</body>
</html>
This code defines an html div element in the body section. The div contains the
html code for an image named "ball.gif". In the head section of the web page is a block of
style code. This style code defines the size of the div and its background image. It also
positions the ball image inside the div.
One important thing to note here is the CSS position properties. The position property
for the div is set to relative so that the div can be positioned on the web age. The
position property for the ball is set to absolute so that it can be positioned inside the div.
The example above demonstrates a sprite image with a transparent background positioned
in a div element that has a background image.
You can get the ball image and background image for this example by right-clicking on
the ball and, in the menu that appears, selecting "Save Image As..." and right-clicking on
the background and, in the menu that appears, selecting "View Background Image..." and
then in the view right-clicking on the background and, in the menu that appears, selecting
"Save Image As...".
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
