29th of June 2000
Object layers can be moved smoothly using DHTML to create an animation effect. My picture scrolls from left to right across table cells to reveal the heading text. In this tip, I'll set up the three components needed to execute this technique. First, a style sheet defines the layers:
The procedure for Netscape and Internet Explorer is a little different, but the main theme is the same. Grab the "left" property of the object from its style sheet and add a set number to it (in this case 5). It repeats until reaching 420 pixels from the left. Also, this takes a parameter called spot, which will be the same as the initial relative left position of the image. Repeat every 50 milliseconds.
Finally, the HTML portion of the animation. Here, we set the animation in motion by calling the moveit() function at page load. The parameter (0) is sent, corresponding to the left positioning of the image layer from its style sheet properties. The two DIV sections place the image and the text on the page, along with the style sheet classes they will use.
Okay? Layer animation is relatively simple and painless, but you may ask, "What can I use it for?" Well, how about something like an interactive quiz. Instead of starting the animation at page load, assign anchor tags to multiple images, then have your visitor click the one they believe to be the right answer. Call the moveit function when the image is clicked to reveal whether they made the correct choice. Basically, just use your imagination and have fun.
Home Community Confusion Awards Links Helpware
Copyright © 1997-2000 Internet Brothers. Not that you'd want any of it.