- Web Development Tutorials

Page Transitions

How to add a page transition
home    DHTML Pit Stop  |  DHTML/JavaScript Tutorial Index


Adding a page-entry transition to a page is done through the use of a special META tag, so there really isn't any scripting involved- you just need to know the tag. At this time, transitions are only supported by Internet Explorer 4 or better- other browsers will just ignore the meta tag.

So, let's take a look at the tag that will create an entry transition for a page. You would place this between your <HEAD> and </HEAD> tags:

<META HTTP-EQUIV="Site-Enter" content="RevealTrans(Duration=3,Transition=23)">

That looks a bit technical, let's look at the parts of the tag in more detail:


This command tells the browser to be ready to do something when someone enters the site. What the browser will do is determined by the next command (content=" ").


This command tells the browser to perform a transition. The duration and transition type are defined inside this command, here is what they do:


This determines the amount of time the transition will take from its beginning to its completion. The number is in seconds, so in this case the transition takes 3 seconds. You can change this number to make the transition longer or shorter.


This determines the type of transition that will be executed. There are 24 transitions at this time, with the numbers from 0-23. Transition 0 reveals a square from the outside in, and displays the page. Transition 23 displays a random transition from 0-22. You can view all of the transitions by their numbers with examples on the Transitions: By Number page. Once you have found one you like, replace the 23 with the number you desire!

Exit Transitions

Transitions can also be done when a viewer exits the page. The META tag is almost identical, but it performs the action on a "Site-Exit". Again, place the tag inside your <HEAD></HEAD tags:

<META HTTP-EQUIV="Site-Exit" content="RevealTrans(Duration=3,Transition=23)">

Again, you can choose the transition you desire using the Transitions: By Number page.

Now, you may have seen that I used the transitions on single images on the example page. This trick is a bit more complicated, and requires some scripting. There will be a tutorial on that in the future, but for now- enjoy your page transitions!

Well, that does it for now. The next section is: Easy Link Rollovers

By: John Pollock next

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy