Pixelate Filter


Home > Document > Web design > CSS > Filter > Transition > Pixelate

Pixelate Filter

Pixelate filter 는 대상물을 2~50 사이의 지정하는 pixel 크기로 모자이크 시키면서 두 번째에 지정한 image로 transition 시키는 filter 입니다. Static filter의 pixelate 는 정지화면을 모자이크 하는 반면 transition filter에서는 장면을 전환 시킵니다.

Pixelate filter
Property 설 명
MaxSquare 2 ~ 50 사이의 pixel 크기를 지정. Default 50.
Duration Transition이 지속되는 시간의 초 단위. 예) Duration='1.0000' 이면 1초 지속.
html syntax <ELEMENT STYLE =
"filter:progid:DXImageTransform.Microsoft.Pixelate(sProperties)">
scripting object.style.filter =
"progid:DXImageTransform.Microsoft.Pixelate(sProperties)"
적용 대상 All block level elements.
Note




Pixelate Transition 예제


Source code
<html>
<head>
<title>Pixelate Transition Filter</title>
<script type="text/javascript">
<!--
var bState = 0;

function fnToggle(obj, obj1, obj2) {
obj.filters[0].enabled = true;
// 처음 시작하는 image에 pixelate를 적용하기 위해 enabled 값을 true로 준다.
obj.filters[0].Apply();
if (bState == 0) {
bState = 1;
obj.filters.item("DXImageTransform.Microsoft.Pixelate").MaxSquare = 50;
obj.style.backgroundColor="royalblue";
obj.style.color = "#FFFFFF";
obj2.style.visibility="visible";
obj1.style.visibility="hidden";
}

else {
bState = 0;
obj.style.backgroundColor="#ffffcc"
obj.style.color = "#000000"
obj2.style.visibility="hidden";
obj1.style.visibility="visible";
}

obj.filters[0].Play();
}
// -->
</script>
<style type="text/css">
<!--
.container{
width:200px;
height:200px;
position:relative;
top:50px;
left:50px;
background-color:#ffffcc;
border:1px solid tomato;
font:bold 18px verdana;
padding:10px;
filter: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50, enabled=false);
/*시작 할 때 pixelate가 적용되지 않게 하기 위해 enabled를 false로 끈다.*/ }
-->
</style>

</head>
<body>

<button onclick="fnToggle(topContainer, img_1, img_2)">Play Pixelate Filter</button>

<div class="container" id="topContainer">
<img id="img_1" style="position:absolute" src="images/twins.gif" width="136" height="136"
alt="mc2_dice (6K)" />
<img id="img_2" style="visibility:hidden;position:absolute" src="images/mc2_dice.gif"
width="136" height="136" alt="twins (7K)" />
<span style="position:absolute;bottom:10px;">Pixelate Transition</span>
</div>

</body>
</html>


코드 실행 하기

위의 comment에서도 설명한 것 처럼 enabled를 사용하지 않으면 처음 시작하는 이미지부터 pixelate의 MaxSquare=50 이 적용됩니다. 코드 실행기에서 code를 수정하고 실행시켜서 직접 실감해 보시길...





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색