You must be using page transition effects available in PowerPoint but did you know, similar effects are also present in HTML. These effects, described in this post, will enable you to introduce page entry and page exit effects just as done in a PPT.
Page Enter Effects
Noticed the way this page loaded, if not hit the refresh button to check it again. Your HTML page will have a “Page-Enter” effect by putting the following code in the head section. The same script can be used for page exit effect by repacing “Page-Enter” with “Page-Exit”
1.Fade in
<meta http-equiv=”Page-Enter” content=”blendtrans(duration=2.0)”>
2.Circle in
<meta http-equiv=”Page-Enter” content=”revealtrans(duration=2,transition=2)”>
3.Curtain up
<meta http-equiv=”Page-Enter” content=”revealtrans(duration=2,transition=4)”>
4.Barn
<meta http-equiv=”Page-Enter” content=”progid:DXImageTransform.Microsoft.Barn(Duration=2)”>
5.Blinds
<meta http-equiv=”Page-Enter” content=”progid:DXImageTransform.Microsoft.Blinds(Duration=2)”>
6.Checker Board
<meta http-equiv=”Page-Enter” content=”progid:DXImageTransform.Microsoft.CheckerBoard(Duration=2)”>
7.Gradient Wipe
<meta http-equiv=”Page-Enter” content=”progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)”>
8.Pixelate
<meta http-equiv=”Page-Enter” content=”progid:DXImageTransform.Microsoft.Pixelate(Duration=2)”>
9.Dissolve Random
<meta http-equiv=”Page-Enter” content=”progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)”>
10.Spiral
<meta http-equiv=”Page-Enter” content=”progid:DXImageTransform.Microsoft.Spiral(Duration=2)”>
11.Stretch
<meta http-equiv=”Page-Enter” content=”progid:DXImageTransform.Microsoft.Stretch(Duration=2)”>
12.Strips
<meta http-equiv=”Page-Enter” content=”progid:DXImageTransform.Microsoft.Strips(Duration=2)”>
- There are 25 different Page-Enters, all of them are defined in the meta tag
- The content attribute describes the effect
- There are 24 revealtrans Page-Enters, and 1 blendtrans Page-Enter
- The duration property describes how many seconds before the effect is completed.
- The transition property describes which actual effect your document will have, from 0-23
HTML 4.0 Event Handlers
| Event | Occurs When |
| onabort | user aborts page landing |
| onblur | user leaves and object |
| onchange | user changes the value of the object |
| onclick | user clicks on an object |
| ondblclick | user double clicks on an object |
| onfocus | user makes an object active |
| onkeydown | a keyboard key is on its way down |
| onkeypress | a keyboard key is pressed |
| onkeyup | a keyboard key is released |
| onload | a page has finished loading |
| onmousedown | at press of a mouse button |
| onmousemove | cursor moves on an object |
| onmouseover | cursor moves over an object |
| onmouseout | cursor moves off an object |
| onmouseup | user releases the mouse button |
| onreset | user resets a form |
| onselect | user selects content on a page |
| onsubmit | user submits a form |
| onunload | user closes a page |
