1. Technology
Send to a Friend via Email

Animation Tutorials

Learn how to put DHTML animations onto your web page with this series of tutorials. We will start by looking at how we can make objects appear and disappear and the progress to cover how we can make the objects move about on the page.

Defining a Web Page Object
This is the first in a series of tutorials on how to create your own animation effects. In this tutorial we look at how to define a web page object so as to make the object independent of the rest of the web page.

Hide Until Page Finishes Loading
In this second tutorial in the animation series we look at how to hide the web page object until after the page finishes loading.

Scrolling With the Page
This tutorial looks at how we can adjust the position of the object as the page is scrolled so that it maintains a fixed position on the screen.

Random Start Position
In this tutorial we look at how we can get our object to display at a random position on the screen instead of a fixed position.

Hide Again
After we have shown the object on the page we may want to hide it again. This tutorial shows how to give your visitor a link so that they can hide it when they are ready and also shows how you can arrange to have it hide itself automatically after a set time.

Now You See It Now You Don't
We can have an object appear and disappear at set intervals and still have our visitor able to hide it when they want.

Making it Move
Animation isn't just displaying and hiding objects, it involves moving them around too. In this tutorial we look at how to get an object to move to a new location in such a way that it appears to move there slowly.

Selecting an End Position
Moving an object doesn't have to be by a fixed distance as we did in the last tutorial. In this tutorial we look at moving to a set position instead.

Moving Vertically
Previous tutorials have moved our object horizontally. Moving it vertically instead is just as easy.

Speed of Movement
Making the object move faster or slower is just a matter of changing one number. You just have to change it in the right direction.

Reversing Direction
With a minor alteration we can make the object move back to its original position if the move link is selected a second time.

Perpetual Motion
It may be contrary to the laws of physics and so can't happen in the "real" world but perpetual motion is possible on the web.

Moving Diagonally
Let's get our object moving in two dimensions. To start with lets move it the same distance horizontally as we do vertically (otherwise known as a 45 degree angle).

Any Angle
By working out the distance and direction of the required end position from the start position we can have our object move at any angle at all.

Random Movement
By randomly selecting a new destination each time we reach the previous one we can get an object to move randomly about the screen.

Following a Specific Path
Instead of randomly selecting a new destination each time we can load a list of destinations into an array and have our object follow the path from one to the next to the next.

Handling Window Resize
Bringing your animation back into line with the browser window dimensions after it is resized.

©2014 About.com. All rights reserved.