Using DHTML for Page Transitions

This is one of the easiest DHTML items that allows you to create PowerPoint-type transitions when someone enters and exits your page. The effect is that on page is wiped over the last one. The only downfall is that the effect isn't rendered when the page is reloaded.


Setting Up the DHTML Transition

Here is the code that creates the effects. They are META so they go between your documents <HEAD> commands, below the <TITLE> and the </TITLE> comands.

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 is how it breaks down.

  • META means that this command will tell about the page
  • HTTP-EQUIV means do something to this page's display
  • "Site-Enter" means to do something when someone enters the site - (Exit means leave)
  • revealTrans is DHTML script denoting that the page should be revealed
  • Duration=1.0 is the duration of the effect (1.0 is one second)
  • Transition=23 means to randomly choose from 22 other transitions

What was that last one again?

I base my statement on a totally unscientific process of entering numbers 1 through 46 (2 x23) into the transition statement and recorded what happened.

You're right I need to get out more.

Specifying Transition Effects

  1. Opening from the inside out
  2. Scroll in from outter edges
  3. Scroll out from center
  4. Scroll up from bottom
  5. Scroll down from top
  6. Scroll left to right
  7. Scroll right to left
  8. Vertical Blinds from left to right
  9. Horizontal Blinds from top to bottom
  10. Combination of 8 and 9
  11. Looks a lot like 8
  12. Comes in pixels
  13. Scrolls in from outter 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 left to right
  18. Diffrent 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.

BreBru.Com Extra Information Technology HTML