Any Web page comes to life with some type of animation. The classic way to implement animation is to define a series of elements, making each one appear in succession. An animated movie, after all, is nothing but a series of images drawn by an artist that are displayed on screen one after another.
Dynamic positioning, Cascading Style Sheets (CSS), and the Dynamic HTML (DHTML) Document Object Model (DOM), put together, bring animation to the Internet with very minimal code. The manner in which each element in the series appears on the page can vary, from being flown into the page to being gradually faded in using any one of the transition patterns exposed by the filter attribute, or simply made visible through the visibility property of the element.
Although animation is generally timer-driven, an author could choose to animate a sequence of elements on a page in response to a mouse click for better control. The two samples below demonstrate an animation sequence from a slide show presentation—one on a timer, and one on a mouse click.
In a slide show presentation, a presenter might not want the content to be visible all at once. The idea is to bring focus to the speaker and what he or she has to say, not to the slide, thus discouraging the audience from reading ahead. With a mouse click, the speaker controls when the next bullet point appears on the slide. A slight element of surprise should make for a more interesting presentation anyway.
This technique is certainly not limited to slide show presentations, however. Wherever a series of elements is made to appear sequentially on a page, information described in this article could be used.
To better understand transitions in DHTML, see Introduction to Filters and Transitions. Also, How to Apply a Transition on an Image and How to Fly Text in DHTML will help give you a better understanding of the process in the example, as these two techniques are used to animate the elements onto the page.
The following steps outline how to animate a sequence of elements on an HTML page. Toward the bottom, the difference in implementation for the timer-driven animation versus the mouse-driven animation is addressed.
- Decide what display resolution you intend to support.
This can be critical as you start positioning various elements on your page in Step 2. Ideally, every element should be visible to the user, with minimal to no scrolling. When a target resolution has been defined, it is best to configure your system accordingly as you author your page(s). The sample discussed in this article, for instance, has been designed for an 800 x 600 pixel display.
In a Microsoft Windows environment, display settings are configured by following these steps:
- Right-click anywhere on the desktop.
- Select Properties.
- Click the Settings tab.
- Under Desktop Area, use the slider to select the desired resolution (typically 800 x 600).
- Position all necessary elements on the page.
Until there is a tool available that makes positioning elements on an HTML page as easy as dragging and dropping to the desired location, the only way to do this is through trial and error.
Although these elements will be animated into the page and might not be visible initially at run time, you want them to be visible at this point in the authoring process so you can position them perfectly on the screen.
When positioning elements on a page, determine whether to use absolute or relative position. absolute positioning usually works best for animation. With absolute positioning, the element is removed entirely from the normal flow of the document and is set to the location specified in the top and left attributes. Specifying a relative position, on the other hand, positions the element at an offset from its normal position in the flow. Experiment with both values and decide what works best for your page.
This is how one of the elements has been positioned in the sample. Note how the position, top, left, and width CSS attributes have been specified.
<div style="position:absolute; top: 110; left:10; width=200">
<h3><u>Cascading Style Sheets (CSS)</u></h3>
<ul>
<li class=smyellow>Easily maintain styles</li>
<li class=smyellow>and positioning</li>
<li class=smyellow>for all elements on a page.</li>
</ul>
</div> - Assign an identifier (ID) to every element to be animated later.
These elements will be scripted later and are therefore easily referenced
through an identifier.
- Set the visibility attribute to
hidden for each element that will be animated.
This property will then be set to visible later, as the element is animated into the page.
<img id="CSSWindow" src="images/css.gif" width=448 height=448
style="top:100; left:270; position:absolute; visibility:hidden"> - Define the animation sequence.
In a simple animation sequence, the order in which each element appears in the sequence needs to be defined. The sample below defines a sequence array to define this order. The array is initialized in the window's onload event handler.
function window.onload()
{
// Using the IDs assigned to each element, define the order
// of elements in the animation sequence.
sequence = new Array (CSSWindow, CSS1, CSS2, CSS3, CSS4);
// Initialize where you are in the sequence.
currentSequence=0;
}In more complicated animation sequences, it may be necessary to define the manner in which each element is animated onto the screen. For instance, going back to the slide show example, the author may want to fly some elements in and transition others. In this case, a custom attribute may be used, say "animationType", that will be set for each element. When the time comes to animate the element, this attribute will be retrieved (using getAttribute), and the element is animated accordingly. For simplicity, both samples below animate all elements in the sequence in the same manner and therefore do not define the "animationType" attribute.
Another way to specify the animation sequence on a page is to define a custom element, which, like a custom attribute, is accessible through the DHTMLDOM. Scott Isaacs' book, Inside Dynamic HTML, provides a sample that demonstrates how to do this using a user-defined SEQUENCE element. For more information, see the "Presentation Effects" section of the "Dynamic Positioning" chapter.
- Here's where the difference in the timer-driven versus the mouse-driven approach to animation is handled.
- When animating on a timer, set up the timer, and then execute the
animation sequence.
- Set up the timer.
Where you set up the timer will depend on when you want your animation sequence to begin. In this sample, animation starts as soon as the document loads, so the setInterval method is called on the window's onload event. This causes the Animate function, described in the next step, to be called every 1,500 milliseconds.
function window.onload()
{
iTimerID= window.setInterval("Animate()",1500);
} - Execute the animation sequence.
The sample simply applies a transition to each one. When the end of the sequence is reached (that is, currentSequence == sequence.length), the timer is stopped.
Implementation details of the applyTransition function are discussed in How to Apply a Transition on an Image.
<script>
function Animate()
{
// Apply a transition.
applyTransition (sequence[currentSequence++]);
// Stop when end of animation sequence is reached!
if (currentSequence == sequence.length)
window.clearInterval(iTimerID);
}
</script>
Click the Show Me button to see a sample slide show presentation using timer-driven animation. The sample has been set up to work on an 800 x 600 display, with a full-screen browser window.
This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
- When animating on a mouse click, set up the onclick event handler to animate the element.
This particular sample simply makes the element in the sequence visible.
<script>
function document.onclick()
{
if (numClick < sequence.length)
sequence [numClick].style.visibility = "visible";
numClick++;
}
</script>Click the Show Me button to see a sample slide show presentation using mouse-driven animation. The sample has been set up to work on an 800 x 600 display, with a full-screen browser window.
This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.