JavaScript Visual Effects - HouseOfScritps JavaScripts Resources

Add Dramatic Transition Effects to Your Web Pages
By Charles C. Caison

Works in: Internet Explorer 4+

Transition effects alter the way a particular page or page element changes to the next one of that type of element. They are a part of Microsoft Internet Explorer 4+ and can add dramatic effects to your Web site. For example, if your page needs to display an image, and then display another image, you can do better than merely changing to the new image all at once—you can use transitions to make the switch more interesting, appealing, impressive, and dramatic.

You can use transitions to gently dissolve out of an original image and into a new one. Alternatively, you can use them to wipe across the image and display the new one. In addition to images, you can also apply transitions to virtually any element on your page in Internet Explorer, such as tables and text blocks.

Implementing transitions with client-side script is not particularly difficult, but it does involve a few steps to get it to run correctly. First, you need to add code to set up the transition, then make the change to the object, and finally run the transition effect. However, there is an easier way to implement transitions.

Transitions are also available to entire pages, and you can easily apply these transitions to pages. You simply add a <META> tag, with attributes designed particularly for transitions, to the top of your page. This <META> tag controls the transition that will occur, the speed of the transition, and exactly when the transition will happen:

The value of the "http-equiv" attribute indicates that it is a transition and specifies when the transition effect will occur. You have four options as to when the transition will occur:

"Site-Enter"
"Site-Exit"
"Page-Exit"
"Page-Enter"

The value of the "content" attribute controls what a transition will look like and how long it will last. In this case, you are using "revealTrans", which accepts the "Duration" property and the "Transition" property. The "Duration" property is measured in seconds. This particular transition will last one second. The "Transition" property indicates the exact effect that will occur. You can choose from many different transitions, including:

0 = Box in.
1 = Box out.
2 = Circle in.
3 = Circle out.
4 = Wipe up.
5 = Wipe down.
6 = Wipe right.
7 = Wipe left.
8 = Vertical blinds.
9 = Horizontal blinds.
10 = Checkerboard across.
11 = Checkerboard down.
12 = Random dissolve.
13 = Split vertical in.
14 = Split vertical out.
15 = Split horizontal in.
16 = Split horizontal out.
17 = Strips left down.
18 = Strips left up.
19 = Strips right down.
20 = Strips right up.
21 = Random bars horizontal.
22 = Random bars vertical.
23 = Random.

Choosing a particular transition is as easy as including the appropriate number from this list in the value of the "Transition" property. The <META> tag in this example will display a "Wipe down" transition when the page is entered.

Notice that transition number 23 is a random effect. This will randomly display any of the other transition effects. Actually, any number above 22 will create the random effect; 23 is just the first of those numbers. This may be to allow other transitions to be easily added later, and still allow the highest number to be the "Random" effect.

This sample page displays transitions at all available events:

<HTML>
<meta http-equiv="Site-Enter"
content="revealTrans(Duration=1.0,Transition=23)">
<meta http-equiv="Site-Exit"
content="revealTrans(Duration=1.0,Transition=23)">
<meta http-equiv="Page-Exit"
content="revealTrans(Duration=1.0,Transition=23)">
<meta http-equiv="Page-Enter"
content="revealTrans(Duration=1.0,Transition=23)">
<HEAD>
<TITLE>My Transition Page</TITLE>
</HEAD>
<BODY>
Body Text
</BODY>
</HTML>

In addition to "revealTrans", you can also use "blendTrans". The "blendTrans" effect is similar to "revealTrans", except that it always performs the same transition ("fade-in"), and it accepts only a single parameter. This example uses "blendTrans"—notice that only the "Duration" property is specified.

The "blendTrans" effect will always be fade-in. You can use the "blendTrans" effect in place of the "revealTrans" effect for a particular event. You can mix "blendTrans" and "revealTrans" on the same page as long as they are for different events. This code uses both "blendTrans" and "revealTrans":

<HEAD>
<TITLE>My Transition Page</TITLE>
</HEAD>
<BODY>
Body Text
</BODY>
</HTML>

The transition effects work well; however, the "Page-Enter" transition effect may not play if you are opening Internet Explorer and opening a particular page at the same time. Many times the browser must already be opened before the transition effect will display for a "Page-Enter" event.

If you have control over how and when the page gets opened, a simple workaround to the "Page-Enter" issue involves a bit of redirection. A particular user action (such as clicking a link) may open a new browser window. You can load that new instance of the browser with a page whose sole reason for being is to redirect to the page that you actually want to show. This page will redirect the user to the page with the transition:

window.location="ThePageWithTheTransition.htm"

</SCRIPT>

ThePageWithTheTransition.htm is the page containing the "Page-Enter" transition that you actually want your users to see.

One final beauty to using the <META> tag to display transitions is that browsers that do not support transitions simply ignore it. If you browse a page that contains the <META> tag for transitions with Netscape Navigator, it simply ignores the <META> tag and the transition does not occur. The page displays fine—no problem.

Transitions can provide your Web pages with dramatic, eye-catching, professional effects. Using <META> tags is an easy way to add these stunning effects to your pages and grab your users' attention. You have many options as to how the transitions look, how long they last, and when they occur.