Using Page Transitions

Home/DHTML/JavaScripts/Transitions

At this time, these examples only work with Internet Explorer 4 or better. They may soon work with Netscape.

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:

HTTP-EQUIV="Site-Enter"

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=" ").

content="RevealTrans(Duration=3,Transition=23)"

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

Duration=3

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.

Transition=23

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

Partners

CoolHomepages | Web Design Library | Website Content