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.
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.
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.
With a minor alteration we can make the object move back to its original position if the move link is selected a second time.
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.
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).
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.
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.