İE 4 ve üstü tarayıcılar tarfından desteklenen Barn filtresi. Bu filtre ile nesnelere yatay – dikey, içeri ve dışarı geçiş etkileri
verebilirsiniz.
Örnek Demo :
Paylaştığımız demoda kullandığımız kod :
Bilmeniz gereken : Vertical-horizontal (yatay ve dikey olarak ayarlama), in-out (içe ve dışa geçiş efecti ayarlama )
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Barn(orientation=horizontal, motion=out) ">
<!-- İlk Goruntulenen icerik. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- ikinci goruntulenen icerik. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV> <BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<SCRIPT> var bTranState = 0; function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=='0') { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden";} else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();} </SCRIPT>
