[CSS] revealtrans Filter

CSS revealtrans Filter





CSS's revealtrans dynamic filter is a magic filter, which can produce 23 kinds of dynamic effects. what's even more amazing is that it can randomly extract one of the 23 dynamic effects. It is very convenient to use it to dynamically switch between webpages. Source code Insert such a line between Code : <Meta content = revealtrans (transition = 14, duration = 3.0) HTTP-equiv = page-enter>. When you enter this page, the webpage will be pulled from the middle to the two sides like a screen pull. Is it unique ?!



The revealtrans filter has only two parameters: Duration: switch time, in seconds; transition: switch mode, which has 24 methods. For details, see the following table:

Switchover Effect	Transition parameter value	Switchover Effect	Transition parameter value
Rectangle from large to small	0	Random dissolution	12
Rectangle from small to large	1	Expand from top to bottom	13
Circle from large to small	2	Expand from center to bottom	14
Circle from small to large	3	Expand from both sides to the middle	15
Push up	4	Expand from center to both sides	16
Push down	5	Expand from top right to bottom left	17
Push to the right	6	Expand from bottom right to top left	18
Push left	7	Expand from top left to bottom right	19
Vertical blinds	8	Expand from bottom left to top right	20
Horizontal blinds	9	Random horizontal fine lines	21
Horizontal Board	10	Random vertical fine lines	22
Vertical Board	11	Randomly select a special effect	23

Therefore, you only need to change the "transition" value of the revealtrans filter to achieve different page switching effects. Is it too convenient? But unfortunately, it is not that easy to apply the revealtrans filter to an object on a webpage. It can be implemented only by calling its method through JavaScript, which means it needs to be edited manually. Program . However, it is not too difficult. I will explain how to use it by using an example of making a dynamic subtitle transform.



Fade subtitle conversion Effect



This example demonstrates how to use a javascript program to control the revealtrans filter to gradually fade out subtitles. For more information, see the following:



Start subtitle



Subtitles in gradient



Second subtitle

The above results seem to be poor, right? The actual effect looks much more beautiful than this. Because it is a dynamic conversion, the above is only the three images I caught. It can only help you understand the conversion process. The real effect can be seen only when you follow the methods described below. See the production method:



1. Create a revealtrans filter named "mytrans", which is created in the same way as the static filter described earlier. The parameter values are transition = 12 and duration = 2. After the settings are completed, the following code is generated between


<Style type = "text/CSS">

<! --

. Mytrans {filter: revealtrans (transition = 12, duration = 2 )}

-->

</Style>



2. Insert a layer. Change "layer ID" of the layer to "div1" (you can directly add it to the attribute Panel of the layer ), set the background of the layer and adjust the size of the layer, and load the revealtrans filter to the layer. The tag code of the layer you see is as follows: <Div id = "div1" style = "position: absolute; width: 680px; Height: 30px; Z-index: 37; Background: # ffffcc; layer-Background-color: # ffffcc; Border: 1px none #000000 "class =" mytrans "> </div>



3. Insert the following JavaScript program between


<Script language = "JavaScript">

<! --

Function helparray (LEN)

{

This. Length = Len;

}

// Create an array to store the converted content.

Helptext = new helparray (5 );

Helptext [0] = "using a revealtrans filter in a document is actually very easy. ";

Helptext [1] = "first, create a" revaltrans "filter to be converted for the style form of the object ,";

Helptext [2] = "then, use the" apply () "method to prevent errors ,";

Helptext [3] = "now, you can change anything you want to change ,";

Helptext [4] = "Finally, the" play () "method starts to convert. ";

Scripttext = new helparray (5 );

VaR I =-1;

// Display the Conversion Result

Function playhelp ()

{

If (I = 4)

{I = 0 ;}

Else

{I ++ ;}

Div1.filters [0]. Apply ();

Div1.innertext = helptext [I];

Div1.filters [0]. Play ();

// Set the subtitle Demo time in milliseconds. The time here is longer than the time in the filter to ensure that it remains for a period of time after the conversion ends.

// You can view the subtitle content easily. In this example, the subtitle demonstration time is 6 seconds, and the conversion time set in the filter is 2 seconds.

Mytimeout = setTimeout ("playhelp ()", 6000 );

}

-->

</SCRIPT>



4. Add the following code to the <body> source code of the webpage: onload = "playhelp ()".



At this point, you can press F12 to see the effect. It seems that it is not too difficult. If you want to see other conversion effects, you just need to change the transition parameter value in the revealtrans filter. You don't need to change anything else! I think the effect will not be poor when I use it as an advertisement bar. It is much thinner than an animation.



Of course, the revealtrans filter can also be used for images, and the effect is good, but you need to change the Javascript program. Since CSS also has a dynamic filter, which is the blendtrans filter, the fade-in and fade-out effects of the images are quite good, and there are many similar ways to use these two filters, so I will talk about how to use the revealtrans filter to generate the conversion effect on images in the next article.