Web Page Animation
1. Define Web Page Object
Join the Discussion
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.
This is a web page object.
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.
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.