Your website starts here!   
iMaker

iBlog  |   Web mastering lessons  |   «Simply, interestingly, surprisingly...»

Effects of transition between HTML pages with help of meta tag

2008-10-17 | Print version

When vistors go to a slow loading page, transitions between web pages can create a dynamic effect while they are waiting. This can also be used to introduce something new and and get the attention of the user. This is very similar to the page transitions available for use in HyperStudio. This can be achieved by using the RevealTrans label in the META tag placed between the <HEAD> </HEAD> tags in each of the HTML document. You will need to place one for entering a page or for exiting a page. This will work in Internet Explorer Windows only. Netscape does not support this kind of function. There are many Transition Filters that can be used. They are referenced by using a number from 1 to 23. A few are listed below. You can experiment to see what effects the other numbers will produce.

Example:

<meta http-equiv="Page-Enter" content="BlendTrans(Duration=1)" />
<meta http-equiv="Page-Exit" content="BlendTrans(Duration=1)" />

Parameters:

Page-Enter - effect of the appearance of the page
Page-Exit - effect of withdrawal from the page
content - applied effect

Examples of efects

progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=25, Duration=1) blocks
blendTrans(Duration=1) Blend
revealTrans(Duration=1,Transition=0) Box in
revealTrans(Duration=1,Transition=1) Box out
revealTrans(Duration=1,Transition=2) Circle in
revealTrans(Duration=1,Transition=3) Circle out
revealTrans(Duration=1,Transition=4) Wipe up
revealTrans(Duration=1,Transition=5) Wipe down
revealTrans(Duration=1,Transition=6) Wipe right
revealTrans(Duration=1,Transition=7) Wipe left
revealTrans(Duration=1,Transition=8) Vertical Blinds
revealTrans(Duration=1,Transition=9) Horizontal Blinds
revealTrans(Duration=1,Transition=10) Checkerboard across
revealTrans(Duration=1,Transition=11) Checkerboard down
revealTrans(Duration=1,Transition=12) Random Disolve
revealTrans(Duration=1,Transition=13) Split vertical in
revealTrans(Duration=1,Transition=14) Split vertical out
revealTrans(Duration=1,Transition=15) Split horizontal in
revealTrans(Duration=1,Transition=16) Split horizontal out
revealTrans(Duration=1,Transition=17) Strips left down
revealTrans(Duration=1,Transition=18) Strips left up
revealTrans(Duration=1,Transition=19) Strips right down
revealTrans(Duration=1,Transition=20) Strips right up
revealTrans(Duration=1,Transition=21) Random bars horizontal
revealTrans(Duration=1,Transition=22) Random bars vertical
revealTrans(Duration=1,Transition=23) Random

P.S. Duration=1, one second.

 

iBlog  |  Web mastering lessons  |  Interesting news  |  Travel blog!  |  «Simply, interestingly, surprisingly...»