본문 바로가기

javascript

여러군데 흩어졌다가 차례대로 정열되는 텍스트 메세지들

여러가지 색갈로 흩어졌다가 모여 보여주는 텍스트 애니메이션 스크립트 입니다

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title> script </title>
</head>

<body>

<!----  아래의 방법으로 <BODY> 와 </BODY> 태그 사이에 붙여 넣으세요 --->

<SCRIPT>

var text=new Array()
var textsplashcolors=new Array()

// 메세지를 설정 하세요
text[0]="자바스크립트 소스뱅크, 소스창고에 오신것을 환영합니다."
text[1]="J@SKO is the best JavaScript Source Bank"
text[2]="Have a nice Day with funny JavaScript"
text[3]="동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세"
text[4]="대한사람 대한으로 길이 보전하세요"

// 색상들을 설정 합니다
textsplashcolors[0]="#000000"
textsplashcolors[1]="#ff0000"
textsplashcolors[2]="#008800"
textsplashcolors[3]="#0000ff"
textsplashcolors[4]="#880088"
textsplashcolors[5]="#ff9700"

// 글꼴
var textfont="굴림"

// 글자의 크기
var textfontsize=12

// 네츠케이프 4 용 글꼴 설정
var textfontsizeHTML=3

//메세지간의 간격(초)
var textpause=3

var textweight="bold"
var textweightA="<b>"
var textweightB="</b>"
var textitalic="normal"
var textitalicA=""
var textitalicB=""
var textalignabsolute="topleft"
var letterwidth=new Array()
var messagewidth=0
var messageheight=0
var i_colors=0
var letterspace=Math.floor(textfontsize/1.3)
var timer
var i_text=0
var textsplitted
var i_textpath=0
var endpause=1
var endpausemilli=endpause*10
var maxtextlength=0
var i_endposition=0
var windowwidth=0
var windowheight=0
var windowwidthfactor=1
var windowheightfactor=1
var i_span=0
var startposmax_x=0
var startposmax_y=0
textpause*=1000
var x_step=new Array()
var y_step=new Array()
var x_finalpos=new Array()
var y_finalpos=0
var max_loop=20
var i_loop=0

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0

for (i=0;i<=text.length-1;i++) {
        if (text[i].length>=maxtextlength) {maxtextlength=text[i].length}
}
for (i=0;i<=text.length-1;i++) {
        text[i]=text[i]+" "
}

var xpos=new Array()
for (i=0;i<=maxtextlength;i++) {
        xpos[i]=5000
}

var ypos=new Array()
for (i=0;i<=maxtextlength;i++) {
        ypos[i]=5000
}

function randomizer(range) {                
        return Math.floor(range*Math.random())
}

function getpagesize() {
        if (ie) {
                windowheight=parseInt(document.body.clientHeight)
                windowwidth=parseInt(document.body.clientWidth)
        }
        if (ns4 || ns6) {
                windowheight=parseInt(window.innerHeight)
                windowwidth=parseInt(window.innerWidth)
        }
        startposmax_x=windowwidth-2*parseInt(textfontsize)
        startposmax_y=windowheight-2*parseInt(textfontsize)

        changecontent()
}

function changecontent() {
                messagewidth=0
                var textsa=text[i_text]
                textsplitted=textsa.split("")
                if (ie) {
                        for (i=0;i<=textsplitted.length-1;i++) {
                                var thisspan=eval("document.all.span"+i)
                            thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+";font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+";text-align:center'>"+textsplitted[i]+"</span>"
                                i_colors++
                                if (i_colors>textsplashcolors.length-1) {i_colors=0}
                                letterwidth[i]=Math.round(thisspan.offsetWidth*1.2)
                                
                                if (letterwidth[i]==0) {letterwidth[i]=parseInt(textfontsize)}
                                messagewidth+=letterwidth[i]
                                messageheight=Math.round(document.all.span0.offsetHeight)
                        }
                }
                if (ns6) {
                        for (i=0;i<=textsplitted.length-1;i++) {
                                var thisspan=eval(document.getElementById('span'+i))
                            thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+";font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+"'>"+textsplitted[i]+"</span>"
                                i_colors++
                                if (i_colors>textsplashcolors.length-1) {i_colors=0}
                                letterwidth[i]=Math.round(parseInt(thisspan.offsetWidth)*1.2)
                                if (letterwidth[i]==0) {letterwidth[i]=textfontsize}
                                messagewidth+=letterwidth[i]
                                messageheight=Math.round(document.getElementById('span0').offsetHeight)
                        }
                        
                }
                if (ns4) {
                        for (i=0; i<textsplitted.length-1; i++) {
                            var thisspan=eval("document.span"+i+".document")
                            thisspan.write("<p><font size="+textfontsizeHTML+" color="+textsplashcolors[i_colors]+" face="+textfont+">"+textitalicA+textweightA+textsplitted[i]+textweightB+textitalicB+"</font></p>")
                                thisspan.close()
                                letterwidth[i]=Math.round(thisspan.width*1.2)
                                if (letterwidth[i]==0) {letterwidth[i]=textfontsize}
                                messagewidth+=letterwidth[i]
                                messageheight=Math.round(document.span0.document.height)
                                thisspan.clear()
                                i_colors++
                                if (i_colors>textsplashcolors.length-1) {i_colors=0}
                    }
                        for (i=0; i<textsplitted.length-1; i++) {
                            var thisspan=eval("document.span"+i)
                            thisspan.visibility="show"
                    }
                }
                i_text++
                if (i_text>=text.length) {i_text=0}
                getfinalpos()
}

function getfinalpos() {
        if (ie || ns6) {var padding_x=100}; if (ns4) {var padding_x=40};
        if (ie || ns6) {var padding_y=80}; if (ns4) {var padding_y=40};
        if (textalignabsolute=="middlecenter") {
                x_finalpos[0]=(windowwidth-messagewidth)/2
                y_finalpos=(windowheight-messageheight)/2
        }
        else if (textalignabsolute=="topleft") {
                x_finalpos[0]=5
                y_finalpos=0
        }
        else if (textalignabsolute=="topcenter") {
                x_finalpos[0]=(windowwidth-messagewidth)/2
                y_finalpos=0
        }
        else if (textalignabsolute=="topright") {
                x_finalpos[0]=windowwidth-messagewidth
                y_finalpos=0
        }
        else if (textalignabsolute=="bottomleft") {
                x_finalpos[0]=5
                y_finalpos=windowheight-messageheight
        }
        else if (textalignabsolute=="bottomcenter") {
                x_finalpos[0]=(windowwidth-messagewidth)/2
                y_finalpos=windowheight-messageheight
        }
        else if (textalignabsolute=="bottomright") {
                x_finalpos[0]=windowwidth-messagewidth
                y_finalpos=windowheight-messageheight
        }
        for (i=1;i<textsplitted.length-1;i++) {
                x_finalpos[i]=x_finalpos[i-1]+letterwidth[i-1]
        }
        gotostartpos()
}

function gotostartpos() {
        if (ie) {
                for (i=0;i<textsplitted.length-1;i++) {
                        var thisspan=eval("document.all.span"+i+".style")
                        thisspan.posLeft=randomizer(startposmax_x)
                        thisspan.posTop=randomizer(startposmax_y)
                }
        }
        if (ns4) {
                for (i=0;i<textsplitted.length-1;i++) {
                        var thisspan=eval("document.span"+i)
                        thisspan.left=randomizer(startposmax_x)
                        thisspan.top=randomizer(startposmax_y)
                }
        }
        if (ns6) {
                for (i=0;i<textsplitted.length-1;i++) {
                        var thisspan=eval("document.getElementById('span'+i).style")
                        thisspan.left=randomizer(startposmax_x)
                        thisspan.top=randomizer(startposmax_y)
                }
        }
        gotostandstillpos()
}

function gotostandstillpos() {
        if (ie) {
                if (i_loop<=max_loop-1) {
                        for (i=0;i<textsplitted.length-1;i++) {
                                var thisspan=eval("document.all.span"+i+".style")
                                x_step[i]=(x_finalpos[i]-thisspan.posLeft)/(max_loop-i_loop)
                                y_step[i]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)                
                                thisspan.posLeft+=x_step[i]
                                thisspan.posTop+=y_step[i]
                        }
                        i_loop++
                        var timer=setTimeout("gotostandstillpos()",20)
                }
                else {
                        i_loop=0
                        clearTimeout(timer)
                        timer=setTimeout("gotoendpos()",textpause)
                }
        }
        if (ns4) {
                if (i_loop<=max_loop-1) {
                        for (i=0;i<textsplitted.length-1;i++) {
                                var thisspan=eval("document.span"+i)
                                x_step[i]=(x_finalpos[i]-thisspan.left)/(max_loop-i_loop)
                                y_step[i]=(y_finalpos-thisspan.top)/(max_loop-i_loop)                
                                thisspan.left+=x_step[i]
                                thisspan.top+=y_step[i]
                        }
                        i_loop++
                        var timer=setTimeout("gotostandstillpos()",20)
                }
                else {
                        i_loop=0
                        clearTimeout(timer)
                        timer=setTimeout("gotoendpos()",textpause)
                }
        }
        if (ns6) {
                if (i_loop<=max_loop-1) {
                        for (i=0;i<textsplitted.length-1;i++) {
                                var thisspan=eval("document.getElementById('span'+i).style")
                                x_step[i]=(x_finalpos[i]-parseInt(thisspan.left))/(max_loop-i_loop)
                                y_step[i]=(y_finalpos-parseInt(thisspan.top))/(max_loop-i_loop)                
                                thisspan.left=parseInt(thisspan.left)+x_step[i]
                                thisspan.top=parseInt(thisspan.top)+y_step[i]
                        }
                        i_loop++
                        var timer=setTimeout("gotostandstillpos()",20)
                }
                else {
                        i_loop=0
                        clearTimeout(timer)
                        timer=setTimeout("gotoendpos()",textpause)
                }
        }
}

function gotoendpos() {
        if (ie) {
                if (i_loop<=textsplitted.length-1) {
                        var thisspan=eval("document.all.span"+i_loop+".style")
                        thisspan.posLeft=-1000
                        i_loop++
                        var timer=setTimeout("gotoendpos()",10)
                }
                else {
                        clearTimeout(timer)
                        i_loop=0
                        var timer=setTimeout("changecontent()",400)
                }
        }
        if (ns4) {
                if (i_loop<=textsplitted.length-1) {
                        var thisspan=eval("document.span"+i_loop)
                        thisspan.left=-1000
                        i_loop++
                        var timer=setTimeout("gotoendpos()",10)
                }
                else {
                        clearTimeout(timer)
                        i_loop=0
                        changecontent()
                }
        }
        
        if (ns6) {
                if (i_loop<=textsplitted.length-1) {
                        var thisspan=eval("document.getElementById('span'+i_loop).style")
                        thisspan.left=-1000
                        i_loop++
                        var timer=setTimeout("gotoendpos()",10)
                }
                else {
                        clearTimeout(timer)
                        i_loop=0
                        changecontent()
                }
        }
}

if (ie) {
        for (i=0;i<=maxtextlength;i++) {
            document.write("<span id='span"+i+"' style='position:absolute'>")
                
            document.write("</span>")
        }
        window.onload=getpagesize
}
if (ns6) {
        for (i=0;i<=maxtextlength;i++) {
            document.write("<span id='span"+i+"' style='position:absolute'>")
                document.write(textsplitted)
            document.write("</span>")
        }
        window.onload=getpagesize
}
if (ns4) {
        for (i=0;i<=maxtextlength;i++) {
            document.write("<layer name='span"+i+"' visibility=hide>")
                document.write(textsplitted)
            document.write("</layer>")
        }
        window.onload=getpagesize
}
</script>

<!------------------------- 여기까지 ------------------------------------>

</body>
</html>