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:
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:
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):
content=”revealTrans(Duration=1.0,Transition=23)”>
<META HTTP-EQUIV=”Page-Exit”
content=”revealTrans(Duration=1.0,Transition=23)”>
Enjoy!
[The Code]
[Here’s What’s Happening]
[What Was That Last One Again?]
[The Transition Numbers]
[Where Did These Transitions Come From?]
