Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

page transitions

How To

page transitions

by  DelphiAaron  Posted    (Edited  )
Internet Explorer
Enter-Exit Effects
Internet Explorer has some built in special effects which you can use on your html pages and which do NOT cost anything in the way of bandwidth. They are effects already available in IE5 and earlier. Since most people have IE, you might as well put in a single line of code to "call" these effects and give your site a nifty look. But be careful you don't overdo it as many may try ;o)

With that in mind, here is the code ...

These first four effects are to gradually fade in and out, i.e. the page up fades out as the next page fades in simultaneously. I list four permutations to show the different code which is applicable to all the other effects listed. Just replace the "Enter" for "Exit", etc. Also, to change the length of time the effect takes, change the seconds from (Duration=1.0) to (Duration=4.5) so that instead of taking 1 second to complete, you now will take 4 and a half seconds, and so forth.

Warning: a long effect will frustrate the viewer. Keep it short so that it competes with the regular instantaneous transition (after the normal World Wide Wait that is).

I have an Enter and an Exit tag on my Table of Contents Pages only. To put them on all my pages would take just tooooooo much effort. But since most people go back and forth from the contents page, they may see an effect for every page anyway. See? Pretty easy stuff and sooooo cheap bandwidthwise.

The Site-Enter code apparently doesn't work for frames. Too bad.
Also, When there is an Enter-Exit conflict ... Enter takes precedence.

---------------------------------------------------

This is the fade in and out. It has no "transition number". Maybe it was the first effect made? Anyway, if not too long, it's very nice.
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1.0)">
<meta http-equiv="Site-Enter" content="blendTrans(Duration=1.0)">
<meta http-equiv="Site-Exit" content="blendTrans(Duration=1.0)">

---------------------------------------------------------
Box in ... Hmmmm
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)">
Box out
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)">
----------------------------------------------------------
Circle in ... These are nice
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)">
Circle out
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)">
----------------------------------------------------------
Wipe up ... Wipes are useful
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">
Wipe down
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=5)">
----------------------------------------------------------
Wipe right
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)">
Wipe left
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)">
----------------------------------------------------------
Vertical blinds ... Don't think so
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)">
Horizpntal blinds
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)">
----------------------------------------------------------
Checkerboard across ... No thanks
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)">
Checkerboard down
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)">
----------------------------------------------------------
Random dissolve ... Can be elegant
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)">
----------------------------------------------------------
Split vertical in ... This is also good
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)">
Split vertical out
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)">
----------------------------------------------------------
Split horizontal in
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=15)">
Split horizontal out
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)">
----------------------------------------------------------
Strips left down ... Not so hot ... I think this is the diagonal thingy.
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)">
Strips left up
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)">
----------------------------------------------------------
Strips right down
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)">
Strips right up
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)">
----------------------------------------------------------
Random bars horizpntal ... Sucks
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)">
Random bars vertical
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">
----------------------------------------------------------
Random ... Any one of the above at random
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">

----------------------------------------------------------
Have fun with it!
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top