본문 바로가기

javascript

흔들리는 텍스트 효과

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

<SCRIPT LANGUAGE="JavaScript1.1">
<!-- Beginning of JavaScript -
var y=30
var x=10
var count_shakes= 0
var shaketicker

function initObjects() {
        if (document.all) {
                shaketicker0 = document.all.shaketick0.style        
                shaketicker1 = document.all.shaketick1.style
                shaketicker2 = document.all.shaketick2.style
                shaketicker3 = document.all.shaketick3.style        
                shaketicker4 = document.all.shaketick4.style
                shaketicker5 = document.all.shaketick5.style
                shaketicker6 = document.all.shaketick6.style
        }
        if (document.layers) {
                shaketicker0 = document.shaketick0
                shaketicker1 = document.shaketick1
                shaketicker2 = document.shaketick2
                shaketicker3 = document.shaketick3
                shaketicker4 = document.shaketick4
                shaketicker5 = document.shaketick5
                shaketicker6 = document.shaketick6
        }
        shake()
}

function getrandom() {
                var dif= Math.floor(Math.random()*2)
                return dif
}

function getrandom2() {
                var dif= Math.floor(Math.random()*5)
                return dif
}

function getrandom3() {
                var dif= Math.floor(Math.random()*10)
                return dif
}

function intermezzo() {
                count_shakes=0
                var goon=setTimeout('shake()',2000)
                
}

function shake() {
        if (count_shakes < 50) {
                
                if (document.all) {
                        shaketicker0.posTop=y+getrandom(); shaketicker0.posLeft=x+getrandom3();
                        shaketicker1.posTop=y+getrandom(); shaketicker1.posLeft=x+getrandom2();
                        shaketicker2.posTop=y+getrandom2(); shaketicker2.posLeft=x+getrandom();        
                        shaketicker3.posTop=y+getrandom(); shaketicker3.posLeft=x+getrandom3();
                        shaketicker4.posTop=y+getrandom3(); shaketicker4.posLeft=x+getrandom2();
                        shaketicker5.posTop=y+getrandom2(); shaketicker5.posLeft=x+getrandom();        
                        shaketicker6.posTop=y+getrandom2(); shaketicker6.posLeft=x+getrandom();        
                }
                if (document.layers) {
                        shaketicker0.top=y+getrandom(); shaketicker0.left=x+getrandom3();
                        shaketicker1.top=y+getrandom(); shaketicker1.left=x+getrandom2();
                        shaketicker2.top=y+getrandom2(); shaketicker2.left=x+getrandom();
                        shaketicker3.top=y+getrandom3(); shaketicker3.left=x+getrandom();
                        shaketicker4.top=y+getrandom(); shaketicker4.left=x+getrandom2();
                        shaketicker5.top=y+getrandom2(); shaketicker5.left=x+getrandom();
                        shaketicker6.top=y+getrandom(); shaketicker6.left=x+getrandom3();
                }
                var timer = setTimeout('shake()',10)
                count_shakes++;
        }                
        else {
                shaketicker0.top=y; shaketicker0.left=x;
                shaketicker1.top=y; shaketicker1.left=x;
                shaketicker2.top=y; shaketicker2.left=x;
                shaketicker3.top=y; shaketicker3.left=x;
                shaketicker4.top=y; shaketicker4.left=x;
                shaketicker5.top=y; shaketicker5.left=x;
                shaketicker6.top=y; shaketicker6.left=x;
                intermezzo()
                clearTimeout(timer)
        }

}

// - End of JavaScript - -->
</SCRIPT>

<STYLE>
.ticker {
position: absolute;
font-family:Verdana;
font-weight:bold;
color:FF0000;
font-size:30px;
letter-spacing:1;
}

.mainbody {
position: absolute;
top:80;
left:10
}
</STYLE>
</HEAD>

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

<BODY BGCOLOR="#FFFFFF"  onLoad="initObjects()">

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


<div id="shaketick0" class="ticker" style="color:FFEEEE">
왜 이리 어지럽지. 이상하네...지진인가??
</div>

<div id="shaketick1" class="ticker" style="color:FFCCCC">
왜 이리 어지럽지. 이상하네...지진인가??
</div>

<div id="shaketick2" class="ticker" style="color:FF9999">
왜 이리 어지럽지. 이상하네...지진인가??
</div>

<div id="shaketick3" class="ticker" style="color:FF7777">
왜 이리 어지럽지. 이상하네...지진인가??
</div>

<div id="shaketick4" class="ticker" style="color:FF5555">
왜 이리 어지럽지. 이상하네...지진인가??
</div>

<div id="shaketick5" class="ticker" style="color:FF2222">
왜 이리 어지럽지. 이상하네...지진인가??
</div>

<div id="shaketick6" class="ticker" style="color:FF0000">
왜 이리 어지럽지. 이상하네...지진인가??
</div>

<div id="mainbod" class="mainbody">
<table cellpadding=7>
<tr>
        <td valign=top>

<CENTER>여기에 본문이 들어갑니다</CENTER>

</td>
</tr>
</table>
</div>