Javascript로 구현한 Shadow Animate 효과

작성:http://ospace.tistory.com/(ospace114@empal.com) 2009.11.16

Internet Explorer에서 glow효과1 입니다.

Internet Explorer에서 glow효과2 입니다.

Internet Explorer에서 dropshadow효과 입니다.

여기서 효과는 FireFox에서만 유효하며 IE에서는 적용되지 않음.

 

Normal Shadow Effect

 

 

Start/Stop Animate Shadow

Let's make glow a new message.

<SCRIPT type=text/javascript>var handle = false;var step = 0;var isInc = true;function doShadowNew(){ var e1 = document.getElementById("glowNew"); //e1.style.textShadow = "1px 1px 3px #000"; if( step > 5 ) { isInc = false; } if(step == 0) { isInc = true; } if(isInc) { ++step; } else { --step; } e1.style.textShadow = "0 0 " + step + "px #000";}function toggleShadowNew(){ if( handle ) { window.clearInterval(handle); handle = false; } else { handle = window.setInterval(function() { doShadowNew(); }, 100); } return false;}</SCRIPT><P><A onclick="return toggleShadowNew();" href="#" >Start/Stop Animate Shadow</A> <DIV id=glowNew>Let's make glow a new message.</DIV>

 

다른 효과

Ospace shadow effect1...

 

Shadow효과는 IE에서는 지원이 되지 않기 때문에 호환성을 고려해야할 듯 합니다. IE는 glow 효과가 있는데 위의 shadow와 비슷한 효과는 줄 수 있지만 일반적은 그림자 효과를 주기에는 무리일 것 같네요.

 

참조:

http://maettig.com/code/css/text-shadow.html

IE인 경우는 http://www.permadi.com/tutorial/glowFilter/index.html

IE의 Visual effect, http://www.ssi-developer.net/css/visual-filters.shtml