SHARE

DHTML Transitions

Written By

Jan 4, 2005

To See This Effect, You MUST be Running MSIE 4.0

Use these to jump around or read it all…

[The Code]

[Here’s What’s Happening]

[What Was That Last One Again?]

[The Transition Numbers]

[Where Did These Transitions Come From?]

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:

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:

The Transition Numbers

You can try this for yourself. Just plug the numbers in and see. This is also pretty helpful knowledge if you want to set a specific transition.

# What Happens

1 Reveal from inside out
2 Scroll in from outer parts
3 Scroll out from center
4 Scroll up from button
5 Scroll down from top
6 Scroll left to right
7 Scroll right to left
8 Vertical Blinds left to right
9 Horizontal Blink top to bottom
10 Combination of 8 and 9
11 Looks a lot like 8
12 Comes in using pixels pixels
13 Scrolls in from outer parts
14 Scrolls out from center
15 Closes from both top and bottom
16 Opens from center to top and bottom
17 Diagonal roll from right to left
18 Different angle diagonal roll right to left
19 Number 17 — the other way
20 Number 18 — the other way
21 Random horizontal lines
22 Random vertical lines
23 Completely random

Cycle appears to start again after this….

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.

Try this format, too (added not so long ago):

Enjoy!