IE browser uses revealTrans to implement webpage transition Special Effects

Webpage transition has some effect on page loading. Many personal websites use this function. If I only pursue the effect of IE browser, I can directly use revealTrans to implement webpage transition special effects. If the compatibility is strong, you need to find the relevant jquery or js effects. I will introduce one below

Use the CSS RevealTrans dynamic filter to achieve the effect: add special effects when converting between webpages! For example, clicking a link on a webpage makes a smooth transition without refreshing the page! Awesome!

Code:

<Meta http-equiv = "Page-Enter" Content = "revealTrans (duration = x, transition = y)">
Code parsing:

Http-equiv = "Page-Enter indicates that a new webpage link is opened to load the effect.

Duration = x indicates the duration of the filter effect (unit: seconds), for example, duration = 2.

Transition = y is the filter type. Which special effect is used? The value ranges from 0 to 23. For example, transition = 23 is a random effect.

Http-equiv attribute parameters:
"Enter webpage" (Page-Enter)
"Exit webpage" (Page-Exit)
"Enter Site" (Site-Enter)
"Leave Site" (Site-Exit)

The Transition parameters are as follows:
0 rectangular narrowing

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 0)">
1. rectangular enlargement

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 1)">
2 rounded down

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 2)">
3. Circular Expansion

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 3)">
4. Refresh from bottom to top

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 4)">
Refresh from top to bottom

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 5)">
6-left-right refresh

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 6)">
7. right-to-left refresh

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 7)">
8 vertical blinds

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 8)">
9 horizontal blinds

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 9)">
10 misplaced horizontal blinds

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 10)">
11 misplaced vertical blinds

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 11)">
Spread

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 12)">
Refresh from around 13 to the center

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 13)">
14. Refresh from center to left

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 14)">
15.

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 15)">
16 up to the middle

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 16)">
17 bottom right to top left

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 17)">
18 top right to bottom left

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 18)">
19 upper left to lower right

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 19)">
20 bottom left to top right

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 20)">
21 horizontal bars

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 21)">
22 vertical bars

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 22)">

23 or more 22 types of random selection

<Meta http-equiv = "Page-Enter" content = "revealTrans (Duration = 1.0, Transition = 23)">
Page loading fade-in and fade-out effects

<Meta http-equiv = "Page-Enter" Content = "blendTrans (Duration = 10)">

Note: The code is only valid for IE browsers, but not for other browsers.

Some jquery instances are recommended below.

1. Full Screen layout page conversion Download & Demo

A nice page conversion with simple response. The practice is to first display four projects and then expand them to add the built-in items to the page.

 

2. Page conversion Download & Demo

Display gallery with CSS animation for webpage transition effects.

 

3. Pesudo animation and transition Download & Demo

Some creative cases use Pesudo animations and transitions to make interesting results.

4. CSS editing overlay effect Download & Demo1 & Demo2

How to Use CSS editing and transition attributes to create a simple overlay effect.

 

5. Full Screen flip layout Download & Demo

Use BookBlock to create a full screen flip layout. The directory is displayed like a flip book page, and accessed through the toolbar menu, sliding out of the page from the left.

 

6. Responsive image sets: Gamma gallery Download & Demo

The Gamma gallery is a responsive gallery that provides an adjustable grid layout and full screen slide view.