본문 바로가기

javascript

glow 텍스트 효과 주기

<HTML>
<HEAD>
<TITLE> 자바스크립트 소스뱅크 - 자스코 </TITLE>

<!-- 1. 윈도우의 메모장 등으로 아래의 스크립트를 <HEAD>태그와 </HEAD> 태그 사이에 복사 해 넣으세요 -->

<script>
<!--

var divs = new Array();
var da = document.all;
var start;

// 스피드를 조절 하세요
var speed = 50;

function initVars(){

if (!document.all)
return

// 다음 형식으로 수정하세요
// addDiv(ID,"GLOW 색상",최소강도,최대강도);

addDiv(hi,"lime",2,11);
addDiv(welcome,"red",4,9);
addDiv(message,"purple",2,4);
addDiv(msg2,"orange",15,17);
addDiv(msg3,"blue",1,3);

startGlow();
}

function addDiv(id,color,min,max)
{
var j = divs.length;
divs[j] = new Array(5);
divs[j][0] = id;
divs[j][1] = color;
divs[j][2] = min;
divs[j][3] = max;
divs[j][4] = true;
}

function startGlow()
{
        if (!document.all)
                return 0;

        for(var i=0;i<divs.length;i++)
        {
                divs[i][0].style.filter = "Glow(Color=" + divs[i][1] + ", Strength=" + divs[i][2] + ")";
                divs[i][0].style.width = "100%";
        }

        start = setInterval('update()',speed);
}

function update()
{
        for (var i=0;i<divs.length;i++)
        {
                if (divs[i][4])
                {
                        divs[i][0].filters.Glow.Strength++;
                        if (divs[i][0].filters.Glow.Strength == divs[i][3])
                                divs[i][4] = false;
                }
        
                if (!divs[i][4])
                {
                        divs[i][0].filters.Glow.Strength--;
                        if (divs[i][0].filters.Glow.Strength == divs[i][2])
                                divs[i][4] = true;
                }
        }
}
//-->
</script>

</HEAD>

<!-- 2. <BODY> 태그안에 아래의 코드를 복사 해 넣으세요 -->

<BODY onLoad="initVars()">

<!-- 3. <BODY>태그와 </BODY> 태그 사이에 아래의 코드를 복사 해 넣으세요 -->

<div id="hi" style="color: lime">
안녕하세요
</div>
<br>
<div id="welcome" style="color: lime">
반갑습니다
</div>
<br>
<div id="message" style="color: lime">
이 메세지는 어떻게 보일까요
</div>
<br>
<div id="msg2" style="color: lime">
the best JavaScript Source Bank
</div>
<br>
<div id="msg3" style="color: lime">
Have a Nice Day!!
</div>

</BODY>
</HTML>