March 8th, 2007, 03:39 PM
|
#3 (permalink)
|
| Banned
Join Date: Jan 2004 Location: Earth
Posts: 420
| Quote:
Originally Posted by celebritymusic Hi
I want to make an image in a DIV morph into another (in the same DIV) and then back again every ten or 20 seconds, but I want the transition to be smooth. . I was wondering if there is a simple CSS way of doing this, rather than making an animated gif with stacks of frames?
Cheers
Shaun | revealTrans filter allows you to transition between images. This should get you started. Adding a timer, etc will give you the effect of the 20
second pause you are looking for. If I had more time I would have
thrown in the timer logic as well.
This may only work in IE. Don't know, don't care... LOL! Copy, paste, make better... GOOD LUCK! Code: <!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>
revealTrans
</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="http://images.techimo.com/timo_images/images/logo.gif"
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="http://images.resellerratings.com/images/rrlogo1124b.gif"
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;">
Transition 0: Box In
</div>
</body>
</html>
Last edited by Iturea : March 8th, 2007 at 03:42 PM.
|
| |