×
Home About Us Products Services News Free Scripts Contact
news php scripts and software

JavaScript & DHTML example - How to create a complex matrix transition?


JavaScript & DHTML - How to create a complex matrix transition?

Copy and test the code below:

<SCRIPT>
//oObj input requires that a matrix filter be applied. 
//deg input defines the requested angle of rotation.
var deg2radians = Math.PI * 2 / 360;
function fnSetRotation(oObj, deg)

{   
    rad = deg * deg2radians ;
    costheta = Math.cos(rad);
    sintheta = Math.sin(rad);

    oObj.filters.item(0).M11 = costheta;
    oObj.filters.item(0).M12 = -sintheta;
    oObj.filters.item(0).M21 = sintheta;
    oObj.filters.item(0).M22 = costheta;

}


//oObj input requires that a matrix filter be applied. 
//flMultiplier input defines the amount by which the oObj is resized.
function fnResize(oObj, flMultiplier)
{    
    oObj.filters.item(0).M11 *= flMultiplier;
    oObj.filters.item(0).M12 *= flMultiplier;
    oObj.filters.item(0).M21 *= flMultiplier;
    oObj.filters.item(0).M22 *= flMultiplier;
}


var iCount = 400;

function fnSpin(oObj)

{


    var flMultiple = iCount/720; 
    iCount += 4;


    if (iCount>=360*3)     {
    oObj.onfilterchange = null;

}

    fnSetRotation(oObj, iCount);
    fnResize(oObj, flMultiple);

}

</SCRIPT>

<!-- When loaded, the onfilterchange event is fired as the filter makes 
its initial settings.  This starts the animation.-->
<DIV ID="oDiv" STYLE="position:absolute; 
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"
onfilterchange="fnSpin(this)" >
<DIV STYLE=" background-color: lightblue; padding:5;">
	   NetArt Media<BR/>
	   NetArt Media<BR/>
	   NetArt Media<BR/>
	   NetArt Media<BR/>
	</DIV>
</DIV>

Category: JavaScript & DHTML

 
<< Go back