CSS Page Transitions (Explorer)

Any problem with HTML can be discussed here.
Post Reply
morelia
Posts: 26
Joined: Sun Mar 13, 2005 1:27 am

CSS Page Transitions (Explorer)

Post by morelia »

The page transitions allow to visualize similar effects to some changes of television images. Said otherwise, the invoked page doesn't appear directly but rather it goes preceded of effects of different type, such as breakups and other presentations.

The transitions are activated exclusively when you consents to the page of another **** or, in alternative, when you leaves the page to see another. Therefore, pressing the button "upgrades" of the navigator, any effect won't take place but rather it will be necessary to return to the previous page and to make **** again in the connection.

The transition effects can be given to the entrance (page-enter) or to the exit (page-exit) of page.

The code is inserted among the marks <HEAD> and it allows 23 different effects. In the examples that figure the value next "Page enter" it has been placed by what the effects take place when entering in the page. These are the effects to disposition:

Box in

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=0)">
Box out

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=1)">

Circle in

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=2)">
Circle out

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=3)">
Wipe up

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=4)">
Wipe down

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=5)">
Wipe right

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=6)">
Wipe left

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=7)">
Vertical blinds

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=8)">
Horizontal blinds

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=9)">
Checkerboard across

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=10)">
Checkerboard down

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=11)">
Random dissolve

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=12)">
Split vertical in

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=13)">
Split vertical out

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=14)">
Split horizontal in

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=15)">
Split horizontal out

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=16)">
Strips left down

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=17)">
Strips left up

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=18)">
Strips right down

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=19)">
Strips right up

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=20)">
Random bars horizontal

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=21)">
Random bars vertical

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=22)">
Random

Code: Select all

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=23)">

If you want to see the effects in action, you can visit the site Nuke Bazaryou make **** in some links to see several effects. This place this in php (PHP-Nuke), but visualization of the effect is same in html

Notes:
· to obtain similar effects when leaving the coarse page to substitute "page-enter" with "page-exit."
· is not possible to use the transitions in pages divided in frames (marks), the reason is that the transition effects take place in the whole screen of the navigator and not in a part of this.


Top
toychoq
Posts: 108
Joined: Fri Apr 15, 2005 9:11 am

Post by toychoq »

thank you very much for these codes

give soem links where i can find some other ones
Top
kaos_frack
Posts: 504
Joined: Sat May 07, 2005 8:03 am
Contact:
Contact kaos_frack

Post by kaos_frack »

toychoq wrote:thank you very much for these codes

give soem links where i can find some other ones
isn't this enough for you
i don't think you can find something more than this
Top
Envoxia
Posts: 132
Joined: Sat Nov 18, 2006 9:09 pm

Hah

Post by Envoxia »

Yeah, that should be enough. I was thinking, "ARE there any other codes?"
Top
Surreal
Posts: 133
Joined: Sat Nov 11, 2006 5:03 am

Post by Surreal »

Interesting, but I think some of those codes would annoy users.
Top
dexter
Posts: 32
Joined: Fri Mar 09, 2007 1:18 pm

Post by dexter »

thanks you for sharing code...
Top
Post Reply

Return to “XML, HTML & CSS”