고정 헤더 영역
상세 컨텐츠
본문
인터넷 익스플로러 5.5 이상부터는 CSS상에 필터 코드를 삽입하여 이미지에 멋진 특수 효과를 적용할 수가 있다. 지난 시간엔 알파 필터를 이용하는 방법에 대해 살펴 보았다. 이번 시간엔 블랜드 트랜스 필터(BlendTrans filter)를 어떻게 이용하는지 살펴 보도록 하자.
블렌드 트랜스 필터는 해당 필터를 적용하려는 객체의 페이드-인(fade-in), 페이드-아웃(fade-out)을 조절하는 필터이다. 쉽게 감을 잡기 위해 간단한 예제를 살펴 보자.
아래 있는 버튼을 클릭해 보면 이미지가 페이드-인, 페이드-아웃되는 것을 확인할 수 있을 것이다.
또 다른 예를 살펴보자.
e비즈니스 및 IT 전문가를 위한 지식 미디어, 코리아인터넷닷컴
위 결과에 대한 소스 코드는 다음과 같다.
|
<input type="button" onclick=fadeOut(objImg) value="페이드-아웃"> <img src="/images/photoshop/020116p_01.jpg" id="objImg"> <input type="button" onclick=fadeOut(objDiv) value="페이드-아웃"> <div id="objDiv">e비즈니스 및 IT 전문가를 위한 지식 미디어, 코리아인터넷닷컴</div> |
위 소스 코드에서 사용하고 있는 자바스크립트 함수 fadeIn과 fadeOut은 다음과 같이 미리 정의되어 있어야 한다.
|
<SCRIPT> |
이 블렌드 트랜스 필터를 사용하려면 이와 같이 자바스크립트를 함께 이용한다. 우선 해당 객체에 사용할 필터를 달아야 하는데 이 때 사용하는 코드는 다음과 같다.
|
obj.style.filter="blendTrans(duration=2)"; |
이 때 duration은 트랜지션(transition)에 걸리는 시간을 의미한다. 단위는 "초"이다.
블렌드 트랜스 필터를 사용할 때에는 현재 필터의 status를 파악하여 현재 필터가 진행중인지 멈춰 있는지 등을 파악해야 한다. 이 때 사용하는 속성이 status 속성인데 이 값은 0, 1, 2가 올 수 있다. 0이면 멈춰 있는 상태이고, 1이면 필터가 적용된 상태를 의미하며 2면 현재 필터가 진행중(play)임을 의미한다.
이 블렌드 트랜스 필터에는 사용할 수 있는 메쏘드가 몇 가지 있는데 그 중 여기서 사용한 것은 Apply()와 Play()이다. Apply()는 말 그대로 해당 필터를 적용하는 것이고 Play()는 해당 필터를 진행시키는 것을 의미한다.
우선, 페이드-인을 처리할 때에는 해당 객체의 visibility 속성이 보이지 않고, status 속성이 2가 아닐 경우를 먼저 체크한다. 그 조건을 만족하면 해당 필터를 적용(Apply)한 후 해당 객체의 visibility 속성을 visible로 변경한 다음 필터를 진행(Play)시키면 된다.
페이드-아웃도 그런 원리에 의해 처리하면 된다. 위의 소스 코드를 곰곰히 따져 보면 왜 그렇게 하는지 쉽게 이해할 수 있을 것이다.
