GradientWipe Filter


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

GradientWipe Filter

GradientWipe transition filter는 두 번째 image가 첫 번재 image위에 sliding 되면서 포개어지는 filter인데, 그냥 sliding되는게 아니라 edge 부분에 gradient가 생기면서 sliding 됩니다. 이 때 gradient color는 2개의 image에 지정된 background-color 에 의해 결정됩니다.

GradientWipe filter
Property 설 명
GradientSize 지정한 방향의 길이에서 gradient 가 차지하는 비율. 0.00 ~ 1.00 사이의 부동 소수. Default 0.25
WipeStyle
GradientWipe transition이 진행되는 방향
0 Default. 왼쪽에서 오른쪽으로
1 위에서 아래로.
Motion
정(定) 방향 또는 역(逆) 빙행 설정. 예를 들어 WipeStyle=0, Motion=Reverse 라면 오른쪽에서 왼쪽으로 GradientWipe transition이 진행됨.
Forward Default. 정방향으로 진행
Reverse 역방향으로 진행.
Duration Transition이 지속되는 시간의 초 단위. 예) Duration='1.0000' 이면 1초 지속.
html syntax <ELEMENT STYLE =
"filter:progid:DXImageTransform.Microsoft.GradientWipe(sProperties)">
scripting object.style.filter =
"progid:DXImageTransform.Microsoft.GradientWipe(sProperties)"
적용 대상 All block level elements.
Note




GradientWipe Transition 예제


Source code
<html>
<head>
<title>GradientWipe transition filter</title>
<script type="text/javascript">
<!--
var bState = 0;
function fnToggle(obj, obj1, obj2) {
obj.filters[0].Apply();
if (bState == 0) {
bState = 1;
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.GradientWipe(GradientSize=0.5, WipeStyle=1, Motion=Reverse, Duration=3);
}
-->
</style>
</head>
<body>

<button type="button" onclick="fnToggle(topContainer, img_1, img_2)">
Play GradientWipe 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;">GradientWipe Transition</span>

</div>

</body>
</html>


코드 실행 하기





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

Top
Back
New
검색