본문 바로가기

javascript

텍스트도 헤쳐모여!!

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

<script>
<!-- Beginning of JavaScript -

// CREDITS:
// TextMagnet by Urs Dudli and Peter Gehrig
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.


// 가로
var textwidth=300

// 세로
var textheight=150

// 메세지
var message=new Array()
message[0]="행복하세요?"
message[1]="결혼은 하시고?"
message[2]="아님, 미혼?"
message[3]="흠.. 확실히 행복하신 분이군요"

// 왼쪽여백
// 만약 '-1' 로 설정하면 윈도우의 가운데로 옵니다
var x_finalpos=-1

// 위쪽여백
// 만약 '-1' 로 설정하면 브라우저의 가운데로 옵니다
var y_finalpos=50

// 조각의 x축 개수
var x_slices=24

// 조각의 y축 개수
var y_slices=1

// 속도
var pause=10

// 메시지 조각이 펼쳐질 범위
var screenwidth=900
var screenheight=600

// 여기까지,


var x_step=new Array()
var y_step=new Array()
var x_randompos=0
var y_randompos=0
var i_loop=0
var max_loop=30
var i_text=0
var width_slice=Math.floor(textwidth/x_slices)
var height_slice=Math.floor(textheight/y_slices)
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0

function initiate() {
        if (x_finalpos==-1) {
                x_finalpos=Math.floor(document.body.clientWidth/2)-Math.floor(textwidth/2)
        }
        if (y_finalpos==-1) {
                y_finalpos=Math.floor(document.body.clientHeight/2)-Math.floor(textheight/2)
        }
        cliptop=0
        clipbottom=height_slice
        clipleft=0
        clipright=width_slice
        i_loop=0
        spancounter=0
    if (document.all) {
            for (i=0;i<=y_slices-1;i++) {
                        for (ii=0;ii<=x_slices-1;ii++) {
                                var thisspan=eval("document.all.span"+spancounter+".style")
                                x_randompos=Math.ceil(screenwidth*Math.random())
                                y_randompos=Math.ceil(screenheight*Math.random())
                                thisspan.posLeft=x_randompos
                                thisspan.posTop=y_randompos
                thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
                                clipleft+=width_slice
                        clipright+=width_slice
                        spancounter++
                        }
                clipleft=0
                clipright=width_slice
                cliptop+=height_slice
                clipbottom+=height_slice
                }
   }
   explode_IE()
}

function changetext() {
        spancounter=0
        for (i=0;i<=y_slices-1;i++) {
                for (ii=0;ii<=x_slices-1;ii++) {
                        var thisspan=eval("document.all.span"+spancounter+".style")                
                        thisspan.posLeft=-5000
                        spancounter++
                }
        }
        spancounter=0
        if (i_text>message.length-1) {i_text=0}
        for (i=0;i<=y_slices-1;i++) {
                for (ii=0;ii<=x_slices-1;ii++) {
                        var thisinnerspan=eval("span"+spancounter)
                    thisinnerspan.innerHTML=message[i_text]
                        spancounter++
                }
        }
        i_text++
        initiate()
}


function explode_IE() {
        spancounter=0
        if (i_loop<=max_loop-1) {
                for (i=0;i<=y_slices-1;i++) {
                        for (ii=0;ii<=x_slices-1;ii++) {
                                var thisspan=eval("document.all.span"+spancounter+".style")
                                x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop)
                                y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)                
                                thisspan.posLeft+=x_step[spancounter]
                                thisspan.posTop+=y_step[spancounter]
                                spancounter++
                        }
                }
                i_loop++
                var timer=setTimeout("explode_IE()",pause)
        }
        else {
                spancounter=0
                clearTimeout(timer)
                var timer=setTimeout("changetext()",2000)
        }
}


// - End of JavaScript - -->
</script>
<style>
.spanstyle {
        position:absolute;
    left:-5000px;
        font-size : 28;
        font-family : Arial Black;
        font-style : italic;
        color : Olive;
        text-align : center;
        background-color : 004400;
        border-style : solid;
        padding : 5;
        width : 280;
        height : 90;
}
</style>
</HEAD>

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

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

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


<DIV style="position:absolute;top:200px;left:5px;">


<script>
<!-- Beginning of JavaScript -
if (document.all) {
        for (i=0;i<=y_slices-1;i++) {
                for (ii=0;ii<=x_slices-1;ii++) {
                    document.write("<span id='span"+spancounter+"' class='spanstyle'></span>")
                        spancounter++
                }
        }
        spancounter=0
}
// - End of JavaScript - -->
</script>