Categories:

JavaScript Kit > IE Filters reference > Transitions > Here

GradientWipe Transition (filter)

Last updated: November 28th, 2008

The GradientWipe Transition reveals new content by applying a gradient band over the original content. Defined via IE's CSS filter property and applied through JavaScript, here is its basic syntax:

Syntax:

filter :progid:DXImageTransform.Microsoft.GradientWipe(attribute1=value1, attribute2=value2, etc);

Syntax (post IE8):

-ms-filter: "progid:DXImageTransform.Microsoft.GradientWipe(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.GradientWipe(duration=5)";
filter :progid:DXImageTransform.Microsoft.GradientWipe(duration=5);
}

</style>


<div id="somediv">Some DIV</div>

Syntax Via Scripting

//To define a new GradientWipe filter on an element
object.style.filter ="progid:DXImageTransform.Microsoft.GradientWipe(attribute=value1, attribute2=value2)"

To access an existing property within the GradientWipe filter:
object.filters.item("DXImageTransform.Microsoft.GradientWipe").Property1=value1;

//To access an existing property within the GradientWipe 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 GradientWipe Transition:

GradientWipe 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

gradientSize Sets the percentage of the content that is covered by the gradient band. Default is 0.25 (25%).

Valid values: 0 - 1 (multiplied by 100 to derive percentage value)

motion Sets the direction of the transition effect relative to the wipeStyle property below.. Default is forward. When property is set to "reverse", the direction of the transition is the reverse of that specified in the property wipeStyle.

Valid values (string): "forward" or "reverse".

Example:

<style type="text/css">

#somediv{
width: 90%;
-ms-filter: "progid:DXImageTransform.Microsoft.GradientWipe(duration=5, motion=reverse)";
filter :progid:DXImageTransform.Microsoft.GradientWipe(duration=5, motion=reverse);
}

</style>


<div id="somediv">Some DIV</div>

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:

Value description
0 Transition has stopped.
1 Transition has been successfully applied.
2 Transition is playing.

Example:

<script type="text/javascript">
var mydiv=document.getElementById("test")
alert(mydiv.filters.item("DXImageTransform.Microsoft.GradientWipe").status) //alerts status of transition
</script>

WipeStyle

* This property accessible via scripting only

Sets whether the gradient band moves vertically or horizontally. Default value is 0 (left to right).

Valid values: 0 or 1 (left/right or top/down).

GradientWipe 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).

Example:

<style type="text/css">

#mycontent{
width: 90%;
-ms-filter: "progid:DXImageTransform.Microsoft.GradientWipe(duration=3, gradientSize=0.5)";
filter :progid:DXImageTransform.Microsoft.GradientWipe(duration=3, gradientSize=0.5);
width:150px;
height:150px;
background-color:navy;
color:white;
}

</style>


<div id="mycontent" />
<img src="test.gif" /><br />
This is some content
</div>

<script type="text/javascript">

var divbox=document.getElementById("mycontent")
divbox.filters[0].apply() //capture initial state of DIV (screenshot)
divbox.innerHTML="Hay, content has been changed!" //change DIV's content (though changes not visible yet due to above capture
divbox.filters[0].play() //play transition to reveal updated content

</script>

stop() Stops the transition playback.

GradientWipe Transition Demo


Beautiful castle for sale.

Play Transition

Source:

<style type="text/css">

#sample{
-ms-filter: "progid:DXImageTransform.Microsoft.GradientWipe(duration=3)";
filter :progid:DXImageTransform.Microsoft.GradientWipe(duration=3);
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>

Reference List

[an error occurred while processing this directive]

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.