javascript transition effect

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>
transition effect
</title>
<script type=”text/javascript” xml:space=”preserve”>
//<![CDATA[
var transitionName =
[“Box In”, “Box Out”,
“Circle In”, “Circle Out”,
“Wipe Up”, “Wipe Down”];

var counter = 0;
var whichImage = true;

function blend()
{
if (whichImage) {
image1.filters( “revealTrans” ).apply();
image1.style.visibility = “hidden”;
image1.filters( “revealTrans” ).play();
}
else {
image2.filters( “revealTrans” ).apply();
image2.style.visibility = “hidden”;
image2.filters( “revealTrans” ).play();
}
}

function reBlend( fromImage )
{
counter++;

if (fromImage) {
image1.style.zIndex -= 2;
image1.style.visibility = “visible”;
image2.filters( “revealTrans” ).transition = counter % 6;
}
else {
image1.style.zIndex += 2;
image2.style.visibility = “visible”;
image1.filters( “revealTrans” ).transition = counter % 6;
}

whichImage = !whichImage;
blend();
transitionDisplay.innerHTML = “Transition ” +
counter % 6 + “: ” + transitionName[ counter % 6 ];
}
//]]>
</script>
</head>
<body onload=”blend();”>
<img id=”image2″ src=”https://designikx.files.wordpress.com/2010/01/zindex2.jpg
style=”position: absolute; left: 10px; top: 10px; width: 246px;
z-index:1; visiblity: visible; filter: revealTrans(duration=2, transition=0)”
onfilterchange=”reBlend( false )” alt=”” name=”image2″ />
<img id=”image1″ src=”https://designikx.files.wordpress.com/2010/01/zindex1.jpg
style=”position: absolute; left: 10px; top: 10px; width: 246px;
z-index:1; visiblity: visible; filter: revealTrans(duration=2, transition=0)”
onfilterchange=”reBlend( true )” alt=”” name=”image1″ />

<div id=”transitionDisplay” style=”position: absolute; top: 70px; left: 80px;”>
play it
</div>
</body>
</html>

 

as we use here the inbuilt functions of IE ..it only works on IE. So if any one knows how to remove this drawback …plz let me know.
Thanks

——————————————-
Like this Page on Facebook : – https://www.facebook.com/littlewelt

Advertisements

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

2 Responses to javascript transition effect

  1. vivek says:

    Hi friends i have tried this code is not working

    • nikhil says:

      hey vivek this code absolutely working in IE only. Coz we use here inbuilt functions of IE.

      So if u know any other script that works in all browser let me know. m also working on it.

      thanx.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: