Page Transition Effects

If you have no idea what transition effects are try one of the links below. It will open in a new window and demonstrate the effect you have chosen.

There are many different styles of transitions you can choose from. Browsers that don't parse the effect will load the page normally. In the list below you can see examples of each effect, but first I should caution you about two things:

Transition effects are non-standard. If validating your page is important to you don't use them because the page will fail validation.
If you set the transition duration too long, use it on too many pages, or on key pages that are referred back to often, this effect can become a real nuisance to your visitors. Use your common sense and use it with caution.

Add a transition effect to your page by adding the following to the HEAD section of your web page:

<meta http-equiv="Page-Enter" 
 content="revealTrans(duration=2, Transition=12)" />

To change the effect, change the number after the word "Transition" in the code above to the corresponding effect you want from the list below. To set how long the effect lasts, change the duration time.

The various effects:
Click the Effect for a Sample, use your back button to return here.

There is one other transition effect, a fade effect, but it's coded differently:

<meta http-equiv="Page-Enter" 
 content="blendTrans(Duration=5)" />

The only to thing you can change here is the Duration. It gets added to the HEAD section like the others. All in all, they are pretty nifty effects for such a small bit of code. Wouldn't you agree, Cousin It?

If you don't see the page transitions...

Here's how to enable transition effects in Internet Explorer, and remember, these effects only work in Internet Explorer.

Select Tools/Internet Options from the toolbar.
Click the Advanced tab.
Find "Enable page transitions" under the Browsing section in the Settings window and place a checkmark in the checkbox for the item.
Click Apply, then OK.

If you don't have the transition effects option, then your browser is probably outdated. If I remember right, you need version 5.5 or later.

Don't forget to let the dog out one last time before going to bed. You don't want to wake up to you know what in the morning!

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]