Page Transitions Effects

by kalai 2008-04-30 19:24:03

A page transition effect plays when user opens or leaves a html page. This will work only in IE. Some of the tansitions are

Gradient Wipe transition
Blend and Circle Out transition
Pixelate and Radial Wipe transition
Dissolve and Wheel transition

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>


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


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

In the below code blend Transition is applied
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">

Example

save the below code as trans.html
<html>
<head>
<meta http-equiv="Page-Enter"
content="revealTrans(Duration=1.0,Transition=2)">
<meta http-equiv="Page-Exit"
content="progidVery Happy
XImageTransform.Microsoft.Pixelate(duration=3)">
<title>Sample</title>
</head>
<body>Sample</body>
</html>

Call the file from other file sample.html with the below code


You will get reveal Transition effect when you enter into the page and transition will appear when u exit the page(ie, when u click back buttion).


2923
like
0
dislike
0
mail
flag

You must LOGIN to add comments