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.