Tutorials

Page Transitions

Transitions between pages. Warning! Do not 'over use' these effects. There we go, warning out of the way. Seriously though, although transitions look pretty smart, applying them to every page would be overkill and may well turn people off your site. Be aware that the transition effects are only really supported by Internet Explorer and you will notice the very specific Microsoft references in some of the Meta tags I am about to show you.

Here is the code...

<head>
<meta http-equiv="Page-Enter"
content="progid:DXImageTransform.Microsoft.gradientWipe(duration=5)">
<meta http-equiv="Page-Exit"
content="progid:DXImageTransform.Microsoft.gradientWipe(duration=5)">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Notice how the code or Meta tags go right at the front of the <head> tags. If you have CSS links to external style sheets in your <head> tags and they go before the transition code then the transitions will not work.

There are three things which you can change in this code to alter the effects.

Page-Enter and Page-Exit tells the browser (IE 5.5 and above) when to apply the effect. I.e. when you enter or exit the page. NB: If a following page has a transition then this will override the Page-Exit effect from the previous page.

progid:DXImageTransform.Microsoft.gradientWipe tells the browser (IE 5.5 and above) that the transition you want to use is a 'Gradient Wipe'.NB: Some transitions go by name and some by number (just to be extra confusing). You'll see what I mean in the list below.

(duration=5) tells the browser the speed of the effect, in this instance 5 seconds. Play around with the duration until the effect looks at its best and to give the next page time to load. (this may be a fruitless task if your audience has poor internet speed or an older computer but be sensible and most modern PCs should handle it very well).

If you want to try other transitions then here is a list of the types I am aware of...

Fade blendTrans(duration=1)
Box In revealTrans(duration=1, transition=0)
Box Out revealTrans(duration=1, transition=1)
Circle In revealTrans(duration=1, transition=2)
Circle Out revealTrans(duration=1, transition=3)
Wipe Up revealTrans(duration=1, transition=4)
Checkerboard revealTrans(duration=1, transition=10)
Vertical Checkerboard revealTrans(duration=1, transition=11)
Strips revealTrans(duration=1, transition=20)
Barn revealTrans(duration=1, transition=14)
Dissolve revealTrans(duration=1, transition=12)
Pixelate progid:DXImageTransform.Microsoft.Pixelate(duration=3)
Gradient Wipe progid:DXImageTransform.Microsoft.gradientWipe(duration=1)
Spiral progid:DXImageTransform.Microsoft.Spiral(duration=3, GridSizeX=205, GridSizeY=205)
Wheel progid:DXImageTransform.Microsoft.Wheel(duration=3, spokes=10)
Radial Wipe progid:DXImageTransform.Microsoft.RadialWipe(duration=3)
Iris progid:DXImageTransform.Microsoft.Iris(duration=3)

You can also use transitions between defined images on a page. Please click on this text to view a tutorial on how to do this. It is fairly advanced so only try it if you are comfortable with CSS and javascript.

Advertisements If you would like to advertise on Corrosive Online then get in touch through my Contact Page for details.
Join The Mailing List
    If you have found anything on this site useful or entertaining or you have enjoyed one of my Online Web Design Lessons then I would love you to make a donation. Use the Paypal button below to make a donation.