JavaScript Kit > IE Filters reference > Transitions > Here
Pixelate Transition (filter)
The Pixelate Transition displays the content as pixelated colored squares. It can be used as a simple filter to apply the effect directly to the original content, or as a transition, played during the transition from one content to another. Defined via IE's CSS filter property and applied through JavaScript, here is its basic syntax:
Syntax:
filter :progid:DXImageTransform.Microsoft.Pixelate(attribute1=value1, attribute2=value2, etc);
Syntax (post IE8):
-ms-filter: "progid:DXImageTransform.Microsoft.Pixelate(attribute1=value1, attribute2=value2, etc)";
Note: See "Difference in syntax between pre IE8 and IE8+ browsers" for more info on the changes to the filter syntax in IE8+.
Example:
<style type="text/css">
#somediv{
width: 90%;
-ms-filter: "progid:DXImageTransform.Microsoft.Pixelate()";
filter :progid:DXImageTransform.Microsoft.Pixelate();
}
</style>
<div id="somediv">Some DIV</div>
Syntax Via Scripting
//To define a new Pixelate filter on an element
object.style.filter ="progid:DXImageTransform.Microsoft.Pixelate(attribute=value1, attribute2=value2)"
To access an existing property within the Pixelate filter:
object.filters.item("DXImageTransform.Microsoft.Pixelate").Property1=value1;
//To access an existing property within the Pixelate filter via the filters[] object
object.filters[x].Property1=value1 //where "x" is the position of the filter within list of filters on element
Below lists the attributes/properties of the Pixelate Transition:
Pixelate Transition attributes (properties)
| Attributes/ Properties | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| duration |
Sets the duration of time the transition takes to complete, in seconds. No default value.
Valid values: Floating point number greater than 0 (seconds implied, ie: 2.5 means 2.5 seconds) |
||||||||
| enabled |
Sets/ returns whether the filter is enabled or not.
Valid values: true/ false Note: The Pixelate transition can be used as either a filter (applied directly to a content and instantly visible) or as a transition (effect visible only when changing from one content to the next). When using it as a transition, you must disable the filter when defining it initially, so the effect is only invoked during the desired transition phase. Example: <!--Pixelate Transition used as a filter (effect visible immediately) --> |
||||||||
| maxSquare |
Sets the maximum width in pixels of each pixelated square. Default is 50.
Valid values (integer): 2 - 50 Example: <style type="text/css"> |
||||||||
|
Percent
* This property accessible via scripting only |
Sets the point in which to capture the display of the content to apply the transition on. Default is 0.
Valid values: 0 - 100 (percentage implied) |
||||||||
|
status
* This property accessible via scripting only |
Returns the current state of the transition.
Valid values:
Example: <script type="text/javascript"> |
Pixelate Transition methods
| Methods | Description |
|---|---|
| apply() | Captures the initial display of the content in preparation for the transition to be played (using the play() method). No visible changes to the content made at this point. |
| play([duration]) |
Plays the transition in question. Supports an optional duration parameter that, if set, overrides the value of the duration property above in specifying the duration of the transition (in seconds).
In this following example, the Pixelate transition is used to transition between two contents when hiding the first content before revealing the second (using CSS's " Example: <style type="text/css"> |
| stop() | Stops the transition playback. |
Pixelate Transition Demo
Beautiful castle for sale.
Source:
<style type="text/css">
#sample{
-ms-filter: "progid:DXImageTransform.Microsoft.Pixelate(duration=1, maxSquare=40, enabled=false)";
filter :progid:DXImageTransform.Microsoft.Pixelate(duration=1, maxSquare=40, enabled=false);
width: 230px;
height: 230px;
background-color: black;
padding: 10px;
color: white;
}
</style>
<div id="sample">
<img src="castle.jpg" /><br />
<b>Beautiful castle for sale.</b>
</div>
<p><a href="javascript:playtransition()">Play Transition</a></p>
<script type="text/javascript">
var sample=document.getElementById("sample")
function playtransition(){
sample.innerHTML='<img src="castle.jpg" /><br /><b>Beautiful castle for sale.</b>' //reset DIV to original content (in case demo is run more than once).
sample.filters[0].apply() //capture initial state of image (showing "castle.gif")
sample.innerHTML='<img src="castleinside.jpg" /><br /><b>Interior is elegant yet modern!</b>'
sample.filters[0].play() //play transition to reveal new image and description
}
</script>