IE browser using Revealtrans to achieve web transition effects

Using the CSS Revealtrans dynamic filter, the effect: Add special effects when converting between pages! such as: Click on a link to a Web page smooth transition without refreshing the feeling of the page! It's awesome!

Code:

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=x, transition=y)" >
Code resolution:

http-equiv= "Page-enter" page-enter indicates that a new web link will be opened to load effects.

Duration=x x indicates the duration of the filter effect (in seconds) such as: duration=2, Toggle effect for display 2 seconds

Transition=y y is the filter type. Indicates which effect to use, with a value of 0-23. such as: transition=23, for random effects

Http-equiv Property Parameter:
"Enter Page" (Page-enter)
"Leave page" (page-exit)
"Go to Site" (Site-enter)
"Leave Site" (site-exit)

The Transition parameters are as follows:
0 Rectangle Shrink

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=0)" >
1 Rectangle Enlargement

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=1)" >
2 round Shrink

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=2)" >
3 Circular Enlargement

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=3)" >
4 down to top refresh

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=4)" >
5 Top to bottom refresh

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=5)" >
6 Left to right refresh

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=6)" >
7 Right to left flush

<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 Dislocation 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)" >
12 Point spread

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=12)" >
13 or so to the middle of the refresh

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=13)" >
14 Middle to left flush

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=14)" >
15 Middle to bottom

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=15)" >
16 up and down to the middle.

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=16)" >
17 right down 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 top left to bottom right

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=19)" >
20 left down to top right

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=20)" >
21 Cross Bar

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=21)" >
22 Vertical Bar

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=22)" >

23 or more of 22 randomly selected one

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=23)" >
Page load Fade effect

<meta http-equiv= "Page-enter" content= "Blendtrans (duration=10)" >

Note: The code is only valid for IE browser, other browsers have no effect

Here are some examples of jquery that we recommend

1. Full Screen layout page conversion Download & Demo

A simple response to good-looking page conversions. The practice is to first display four items and then expand them, adding the built-in items to the page.

2. Page conversion Download & Demo

Use CSS animation to achieve the page transition effect of the display atlas.

3, Pesudo animation and Transition Download & Demo

Some creative cases use pesudo animations and transitions to produce interesting results.

4, CSS clip overlay effect Download & Demo1 & Demo2

How to use CSS clip and transition properties to create a simple overlay effect.

5, Full screen page layout Download & Demo

Use Bookblock to create a full-screen paging layout. Display the table of contents like flipping pages, and access from the toolbar menu to slide the page from the left.

6, can respond to the picture set: Gamma atlas Download & Demo

Gamma Atlas is an experimental, responsive Atlas album that provides an adjustable grid layout and Full-screen slide view.