Page Transitions Effects 
(for Internet Explorer)

EXAMPLES

  
A page transition effect plays when user opens or leaves a html page.  You can see some examples below:

OVERVIEW

  
There are two places where a transition can be added: when entering a page, and when leaving a page.  To add the transition effect, define a "Page-Enter" and "Page-Exit" meta tag.   

<meta http-equiv="Page-Enter"  content=transitionFilter>
<meta http-equiv="Page-Exit"   content=transitionFilter>

Notes:

  • Page-Enter defines what filter to apply when user enters the page.

  • Page-Exit defines what filter to apply when user leaves the page.

  • transitionFilter is one of the filters and their parameters.  For a list, you can see it at Microsoft site at: 
    http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp
    I also listed some common ones below.

  • <meta> tags always appears between <head> and </head> on the html page.

  • It is not required to have both "Page-Enter" and "Page-Exit."  You can have both or either.

  • On browsers that do not support the meta tags, the meta tags will be ignored (the page will still open, but without transition).

  • If you happen to use an external style sheet, you need to put the style sheet definition after the meta tags, not before.  Otherwise, the transition won't show up.  That is, do it like below: 
    <head>
  <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
  <!-- style sheet definition should not be put before the meta tag-->
  <LINK REL="stylesheet" HREF="style.css">
  <!-- end style sheet definition-->
  <title>Title</title>
</head>

In fact, it's probably safer to put the meta tags before any other tags in the <head>. (Ie: put the metas immediately after the <head> opening tag).  

An example: 
(You can save the text below as a html page and try opening it from another page to see the transition): 
<html>
  <head>
    <meta http-equiv="Page-Enter" 
      content="revealTrans(Duration=1.0,Transition=2)">
    <meta http-equiv="Page-Exit" 
      content="progid:DXImageTransform.Microsoft.Pixelate(duration=3)">
    <title>Sample</title>
  </head>
  <body>Sample</body>
</html>

Open the example.

Note the quote signs around the content values; syntactically they're required.

Below is a partial list of transitionFilters

Blend and Reveal Transitions  
 You can change the duration of these transitions.  The unit is the number of seconds.  The transition parameter indicates what kind of transition is to be done.  

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)

Additional DirectX Transitions
Note: Some of these filters will only work on IE 5.5 or later.  These transitions are not very commonly used, probably because not many know about them - which means they might be dropped in the future by Microsoft?  Hope not.  The Pixelate and Gradient Wipe are cool.

Pixelate progid:DXImageTransform.Microsoft.Pixelate(duration=3)
GradientWipe 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)

MORE NOTES

  • Page-Enter takes precedence over Page-Exit.  If a page has a Page-Exit, and the next page opened has a Page-Enter, only the Page-Enter will be applied.

  • These filters are non standard, and they only work on Internet Explorer (and even that, not on all versions).  I don't know of other browser brands that support them; and I don't know if these filters will continue to be supported by future browsers.  

  • There are two additional meta tags that you might be interested in:  
    <meta http-equiv="Site-Enter" content=transitionFilter>, and 
    <meta http-equiv="Site-Exit" content=transitionFilter>.  
    They defines what filter to apply upon entering and exiting a site.

  • Use transitions sparingly.  Hmm, think about it, people might get annoyed when a transition takes too long.

  • To learn more about transitions, here's a link to an image transitions effect.

<< MORE TUTORIALS >>
   

  
(C) F. Permadi

permadi@permadi.com