본문 바로가기

javascript

애니메이션 텍스트 만들기

<HTML>
<HEAD>

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

<script language="JavaScript">
<!--

// 애니메이션 속도를 지정합니다. 숫자가 적을수록 빠릅니다
var pause=100

var newcolor=new Array
var timer
var animation_on=true
var thislink
var i_color=0

function startanimation(newlink, c1, c2, c3, c4, c5) {
    if (document.all) {
                newcolor[0]=c1
                newcolor[1]=c2
                newcolor[2]=c3
                newcolor[3]=c4
                newcolor[4]=c5
        animation_on=true
        thislink=eval("document.all."+newlink+".style")        
        colorup()
    }
}

function colorup() {
    if (animation_on && i_color<newcolor.length-1) {
        thislink.color=newcolor[i_color]
        i_color++
                timer=setTimeout("colorup()",pause)
        }
    else if (animation_on) {
        clearTimeout(timer)
                timer=setTimeout("colordown()",pause)
    }
        else {
        clearTimeout(timer)
    }
}

function colordown() {
    if (animation_on && i_color>0) {
        thislink.color=newcolor[i_color]
        i_color--
                timer=setTimeout("colordown()",pause)
        }
    else if (animation_on) {
        clearTimeout(timer)
                timer=setTimeout("colorup()",pause)
    }
        else {
        clearTimeout(timer)
    }
}

function stopanimation() {
    if (document.all) {
        animation_on=false
                clearTimeout(timer)
    }
}
//-->
</script>


</HEAD>

<BODY>

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

<CENTER>

<A name="sample1" onMouseOver="startanimation(this.name,'FF0000','FF4444','FF8888','FFBBBB','FFEEEE')" onMouseOut="stopanimation()" href="http://bizserver.new21.net">이곳에 마우스를 대면 애니메이션 효과가 나타납니다</a><br>

</CENTER>
</BODY>
</HTML>