본문 바로가기

javascript

마우스에 반응하는 텍스트 GLOW 효과

<!--1. 아래의 스크립트를 <HEAD></HEAD>사이에 복사해 넣으세요-->

<script>
<!-- Beginning of JavaScript -

// CREDITS:
// dynamic change of textglow onmousemove
// by Urs Dudli and Peter Gehrig
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.

// 메세지
var message="마우스를 대어 보세요"

// 글꼴
var textfont="굴림"

// 폰트 사이즈
var textsize=35

// 메세지 색상
var textcolor="red"

// Glow 색상
var glowcolor="yellow"


//여기까지


var glowstrength=0
var x,y


function handlerMM(e){
        x = (document.layers) ? e.pageX : event.clientX
        y = (document.layers) ? e.pageY : event.clientY
}
                
function initiate() {
    if (document.all) {
                document.onmousemove = handlerMM;
        glowmessage()
    }
        if (document.layers) {
                document.onmousemove = handlerMM;
                document.captureEvents(Event.MOUSEMOVE);
                textsize=10
        glowmessage()
    }
}

function glowmessage() {                
        if(document.all) {
                glowstrength=Math.round(x/80)+Math.round(y/80)
                glowtext.innerHTML="<span id='glowspan' style='position:absolute;filter:glow(strength="+glowstrength+",color="+glowcolor+");font-family:"+textfont+";font-size:"+textsize+"pt;color:"+textcolor+"'>"+message+"</span>";
                var timer=setTimeout("glowmessage()",100)
        }
        if(document.layers) {
                textsize=3*Math.round(x/80)+3*Math.round(y/80)
                document.glowtext.document.write("<span id='glowspan' style='position:absolute;font-family:"+textfont+";font-size:"+textsize+"pt;color:"+textcolor+"'>"+message+"</span>")
                document.glowtext.document.close()
                var timer=setTimeout("glowmessage()",100)
        }
}

// - End of JavaScript - -->
</script>
</HEAD>

<!--2. <BODY> 태그내에 onload="" 혹은 onunload 부분이 있으면 복사해 넣으세요-->

<body bgcolor="#000000" onLoad="initiate()" text="white" link="yellow" alink="yellow" vlink="yellow">

<!--3. <BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->


<div id="glowtext" style="position:absolute;top:10px;left:100px"></div>