IE browser uses revealTrans to implement webpage transition Special Effects

Source: Internet
Author: User

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.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.