Website Design Edmonton       Website Design Feedback       Website Design Sitemap     Contact Website Design Company
Website Designers R Us - Home
DHTML Transitions

Those of you who are running Explorer 4.0 should right now be going "Oooo!" and "Aaahh!" This is one of the latest DHTML items that will allow you to create Power Point-type transitions when someone enters and exits your page. The only real downfall I have found so far is that the effect isn't rendered when the page is reloaded. You actually have be coming or going.

A good many tutorials come about through e-mail letters I get from readers who drop a command in my lap and yell, as much as one can yell in an e-mail, "What the #$!*% does this do?" That's where this topic came from, although Heath C. Ice had it pretty much figured out by the time he showed it to me. Thanks, Heath, you're a gentleman.

The Code

     It kills me that this is so simple. Here's the code that creates the effects. They are META commands so they go between your document's <HEAD> commands, below the <TITLE> and </TITLE> commands. Here they are:

<META HTTP-EQUIV="Site-Enter" content="revealTrans(Duration=1.0,Transition=23)">
<META HTTP-EQUIV="Site-Exit" content="revealTrans(Duration=1.0,Transition=23)">

Here's What's Happening

 I'll only do the top command. You can pretty much take it from there to figure out the bottom one.

  • META means that this command will tell about the page.

  • HTTP-EQUIV stands for Hypertext Transfer Protocol Equivalent. That's a fancy way of saying, through HTTP, make an equal to this page. Or in simpler terms, do something to the display of this page.

  • "Site-Enter" means to do the transition when someone enters the page. I think this is why you cannot get the effect when simply reloading.

  • revealTrans is DHTML script denoting that the page should be "revealed".

  • Duration=1.0 is the duration of the effect. It's set to one second right now.

  • Transition=23 is to randomly choose from 22 other transitions.

What Was That Last One Again?

What? It doesn't make perfect sense to you that 23 is the perfect number for a random transition? Me neither, actually. And to be quite honest, I'm still not sure I am totally correct. I base my statements on a totally unscientific process of entering the numbers 1 through 46 (2 x 23) into the transition statement and recording what happened.

     You're right. I have no life. Here's what I found:

Where Did These Transitions Come From?

It has to be from Power Point. In fact, at first I guessed that if you didn't have Power Point installed on your computer you wouldn't get these transitions (you know, like fonts), but no go on that one either. When tested on a system without Power Point installed, the effect worked fine. I guess the commands come right along with the browser.
Now, I'll bet your first question is whether you can do this with just a simple line of text or an image. The answer is yes, but that's another tutorial. Coming soon -- I guarantee it.

Return to Listing

Website Designers R Us is a professional Internet strategy and Web design company based in Toronto, Canada. We specialize in best-in-class website design, online marketing, Flash multimedia, corporate identity and print graphics. Website Designers R Us features an integrated team of web consultants, creative designers, writers, programmers and marketing professionals that know how to get online results
 Home          ::             About Us          ::             Support            ::             Services            ::             Link Partners          ::             Contact

Copyright © 2006-2011 Website Designers R Us, a DOT Specialist Company. All rights reserved.