1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blanim01.htm

was emailed to:

Thanks for sharing About.com with others!

Web Page Animation

1. Define Web Page Object

clr gif
Join the Discussion

Questions? Comments?

In this series of tutorials we will look at how to go about animating your web page so that objects can move around the page either in response to action by your visitors or by just following predefined instructions.

To perform this animation we are going to use what is called Dynamic HTML. This is not actually a language as such but is a way of combining HTML, stylesheets, and Javascript to produce the required effects.

Before we can make things move though, we need a way of defining the objects on our page that we want to be able to move so that we have a way to refer to the part of the page from our Javascript code in order to make it move.

The first step in creating an object on our web page that is to be animated via Javascript is to name the object. We do this by adding an id attribute that supplies the object with a name.

<div id="myobj">
This is a web page object.
</div>

The other thing that we need to do is to separate our web page object out from the rest of the web page so that it displays independently of the rest of the page. To do this we need to set up a stylesheet.

If you don't already have a stylesheet attached to your page or you want to add a separate one to contain the stylesheet commands then we need to add a link to a new external stylesheet immediately before the end of the head section of our page.

<link rel="stylesheet" href="anim.css" type="text/css" />

Now that we have our stylesheet link we next open the stylesheet (anim.css in the above example) and add an entry to tell it to position our object independently of the rest of the page.

#myobj {position:absolute;top:300px;left:200px;
width:200px;}

The position:absolute sets this object to display in position independent of the rest of the page, the top and left values set where that position will be, and the width sets how wide our object will be.

So now we have our web page object defined so as to be independent of our page.

See More About

©2014 About.com. All rights reserved.