Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Easy Java Script Animation

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...".

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268