Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

Animated DHTML

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

Dave Massy
Microsoft Corporation

January 1, 2002


Why Animate?
Rotating Banners
Too Many Images
Technical Note
Bring Your Pages to Life

Thanks for all the feedback I continue to receive on both the Fun with Tables and Richer Data Entry articles. It appears people are finding them useful, and are responding with some interesting requests and modifications, as well as fixes of their own. In the coming months, we'll revisit both these topics with updated components that will incorporate some of these.

For this column, I'm going to draw attention to a technology that has evolved over the past three releases of Internet Explorer that allows timing and animation to be easily added to content to create a far richer user experience. In Internet Explorer 5.0 we introduced support for HTML+Time. With version 5.5 and 6.0, this has evolved to be incorporated in a new standard known as Synchronized Multimedia Integration Language (SMIL 2.0), which Microsoft helped develop with the World Wide Web Consortium, W3C.

Note   All of the samples I show here require the use of Internet Explorer 5.5 or later.

Why Animate?

For many of us, the concept of animation on the Internet evokes thoughts of Web sites where flying and changing objects on the page make for a cool piece of design, but are extremely irritating—especially when you are trying to find a specific piece of information, and have to sit through a 20-second animated welcome screen before you can get to the real content. Not all animation needs to go to such extremes; subtle uses can actually aid the display of information to users.

Rotating Banners

Let's take a look at how SMIL 2.0, also referred to as HTML+Time 2.0, can be used to place a rotating banner on a page.

View the sample.

One obvious use for rotating banners is for advertising, but the same technology can easily be used on portal sites for company Web sites and intranets, where keeping users and employees up to date on the latest news is a primary objective.

If you right-click the example above to see the source for the page, you will see that no script is needed to achieve this rotation of content. Rather, it is all achieved using markup on the page. As this is all element based, this is a format that many designers are comfortable working with. (While some people are good at both design and programming, many of us specialize in one discipline and not the other. For myself, I don't particularly excel in design, and I know many designers who are uncomfortable working on pages that include script.)

The example is clearly divided into three sections, which are clearly commented. The first section is the content for the banners, each set of banner content being contained in a SPAN element. The second section is the initial animation that brings the outline for the banner flying in from the left. This is achieved using the T:ANIMATE element that has a number of attributes defining the exact behavior of the animation. (See HTML+TIME 2.0 Reference for a full description.) The third section then provides the rotation sequence, through a T:SEQ element that is set to loop indefinitely. This contains four T:ANIMATE elements, one for each of the four banners, defining the fade effect of the rotation and the duration, amongst other things.

We can see from this that adding rotating content to a page can be relatively easy. It is also easy to imagine using Web Services to retrieve updated content for the banner from a server dynamically, so that a user will see fresh content without necessarily refreshing the page. See Accessing Web Services From DHTML for more about Web Services—another topic we will revisit in the future, when the final Web Service behavior is fully released.

Too Many Images

One of the things I've observed on the Internet is the overuse of images to display what is in essence textual content, whereas this could be achieved in markup, thus eliminating an extra image download. The combination of rich CSS support and SMIL 2.0 for animation means that very rich pages can be created entirely in markup. Take a look at this simple example:

View the sample.

Here we see a nice gradient fill in the background, and some animated ones and zeros sliding across behind the main text. This has all been achieved without the use of images, meaning the download is small and the content can be displayed very quickly for the user.

In this example, we see that the banner is made up of four parts: first the background gradient fill, secondly the three lines of binary ones and zeros, thirdly the orange foreground text, and finally the animation of the binary strings.

Technical Note

You may have noticed that these examples include the following lines at the top of the page that are necessary for the examples to work:

<html xmlns:t ="urn:schemas-microsoft-com:time" >
<?IMPORT namespace="t" implementation="#default#time2">

The HTML tag here is being used to declare the use of the t: namespace in the document and the <?IMPORT processing instruction declares that the namespace of t that we have just declared has an implementation associated with it that will supply all the SMIL2.0 support. The SMIL 2.0 technology is provided by what we refer to as a default behavior—to provide the functionality as a separate component to the core Internet Explorer technologies. This use of behaviors is another powerful example of how component technology can be used, not only to supply scripted .HTC file components, but to also extend the browser functionality using binary code.

Bring Your Pages to Life

I'm certainly not a fan of gratuitous animation of Web pages, but I am a fan of better use of screen real estate to display information, and of more efficient downloads. The examples I've shown here are relatively simple, but HTML+TIME 2.0 Reference includes a full list of the capabilities of this technology, as well as further examples, allowing you to build pages that have rich visual impact without burdening the user with unnecessary downloads.



David Massy occasionally wears sun glasses and pretends to be a dude, but when the dark glasses are removed, he works as a technical evangelist on Windows and Internet Explorer technologies, which means he talks to customers of Microsoft about how they might best use the technologies. Before becoming a technical evangelist, Dave worked on the Internet Explorer team as a program manager. Since Dave is originally from England, he is valiantly struggling to educate his American colleagues on how to correctly pronounce "tomato."

© 2015 Microsoft