Some interesting effects that can be done in HTML that many people don't know about are "Page Transitions." So what's a page transition? Well, you've seen them many times, if you've ever watched television or movies. A page transition is the effect that is used when a scene in a TV show or movies changes. There are lots of different page transition effects: wipes, fades, blinds, and blends are some examples.

A quick aside: If you use Internet Explorer as your browser, you really should be using the latest version (6.0 as of this writing), and apply all of the security patches and service packs that Microsoft has made available. Doing so could literally save your computer from destruction by a worm or virus. Don't let long download times discourage you from applying the updates! Go to http://windowsupdate.microsoft.com and let the update tools scan your computer, then select, download and install the critical patches and updates. Don't worry! The update tools do not send any information about you or your computer to Microsoft (well, that's what Microsoft assures us is the case. I happen to believe them on this one, since it's pretty easy to check if they're lying about this). Also, be sure you are running anti-virus software, with the latest virus descriptions installed. You knew that, right? Running a firewall (like the one that comes with Windows XP, ZoneAlarm or BlackICE) is a really good idea as well. If everyone did these basic things, far fewer viruses and worms would be making life miserable on the Internet.

OK, back to the topic at hand. In Internet Explorer 5.5 and higher, creating page transitions is as simple as including the appropriate <meta> tag in the HTML page head. Here's a couple of examples to try out (note that these examples will only work if your browser is Internet Explorer 5.5 or higher).

First, a simple "blinds" transition as the page is entered. This effect is created by adding this tag to the HTML head:

<META http-equiv="Page-Enter" CONTENT="progid:DXImageTransform.Microsoft.Blinds(Duration=4)" />

Try it!

Cool, no? Another possibility is the pixelate transition. The technique is the same, just the content attribute of the <meta> tag is a little different. This one is pretty wild.

Try it!

You can create transitions that happen as the page is entered, the page is exited, the site is entered or the site is exited.

There are a whole slew of different effects that can be created using the <meta> tag technique, but one of the most exciting things about it is that it only scratches the surface of what can be done. Hundreds of different effects can be created using this technique alone, but there's lots more techniques available! Throw in some Javascript, and you can do just about any sort of animation you can think of.

Of special note - all of the transition effects and filters that can be applied to a page can be applied to individual HTML elements as well, such as <IMG> tags. Can you say "slide show?" The possibilities for creating really cool stuff are limited only by our imaginations.

Check out Microsoft's MSDN Library website for lots more information on how to create cool dynamic HTML page transition (and many other) effects.

In future posts, I'll discuss (and show examples of) some more complex dynamic HTML effects, including some that will work in other browsers (like Netscape 7 and Mozilla) by using the W3C Document Object Model (DOM).

 01/06/2004 05:12:49 AM

Permanent link