이미지 특수 효과 : 리빌트랜스(RevealTrans) 필터

by 라제폰 2008. 12. 9. 10:59

인터넷 익스플로러 4 이상을 사용하고 있다면 필터를 이용하여 이미지에 멋진 효과를 줄 수가 있다. 이미 코리아인터넷닷컴에선 다음과 같은 여러 가지 특수 효과들을 살펴본 적이 있다.

이번 시간엔 RevealTrans 필터를 이용하여 이미지를 점진적으로 나타나게 했다가 점진적으로 사라지게 할 수 있는 효과를 살펴보도록 하겠다. 우선 간단한 예제부터 먼저 살펴보도록 하자.

아래 RevealTrans 필터 적용을 한 번 클릭하면 이미지가 점진적으로 사라질 것이다. 또 한 번 클릭하면 이미지가 점진적으로 나타날 것이다.

위 결과에 대한 소스 코드를 살펴 보도록 하자. 우선 이미지 소스 부분부터 살펴보면 다음과 같다.

위 소스를 보면 버튼을 클릭할 경우 goRevealTrans() 함수를 호출하게 된다. 이 함수에 대한 자바스크립트 정의 부분은 다음과 같다.

<SCRIPT language=javascript>
function goRevealTrans()
{
    objImg.filters[0].Apply();
    if (objImg.style.visibility == "visible") {
        objImg.style.visibility = "hidden";
        objImg.filters.revealTrans.transition=12;
    }
    else {
        objImg.style.visibility = "visible";
        objImg.filters[0].transition=12;
    }
    objImg.filters[0].Play();
}
</SCRIPT>

위 스크립트에서 objImg는 <span> 태그를 통해 정의한 객체 ID이다. 즉 이미지를 포함하고 있는 SPAN 영역에 대한 아이디인 것이다. 이 ID를 통해 스타일과 필터 속성에 접근할 수가 있는 것이다. transtition 값을 조금씩 변경하면서 테스트 하면 자신이 원하는 리빌트랜스 효과를 얻을 수 있을 것이다.

위 소스코드를 변형해 가면서 테스트 해보고 싶은 사람은 아래 텍스트 박스 내의 소스를 수정한 후 "소스실행하기" 버튼을 클릭하여 테스트 해보기 바란다.

<html> <head> <SCRIPT language=javascript> function goRevelTrans() { objImg.filters[0].Apply(); if (objImg.style.visibility == "visible") { objImg.style.visibility = "hidden"; objImg.filters.revealTrans.transition=12; } else { objImg.style.visibility = "visible"; objImg.filters[0].transition=12; } objImg.filters[0].Play(); } </SCRIPT> </HEAD> <body> <p align="center"> <INPUT onclick=goRevelTrans(); type=button value="RevealTrans 필터 적용"></p> <p align="center"> <SPAN id=objImg style="FILTER: revealTrans(duration=2); VISIBILITY: visible; WIDTH: 210px; HEIGHT: 262px"><IMG src="http://korea.internet.com/images/photoshop/020129p_01.jpg"> </SPAN></p> </body> </html>