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