Fri, 17 May 2024


How to create a complex matrix transition?

By: Anton, NetArt Media
Fri, 3 December 2021

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
Share this post:



See All Scripts






Subscribe for our newsletter

Receive the latest blog posts direct in your mailbox