본문 바로가기

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 message=new Array()
message[0]="자바스크립트 소스뱅크에 오신것을 환영합니다"
message[1]="Welcome to JavaScript Source Bank"
message[2]="소스창고는 매일 매일 재미있고 유용한 스크립트 소스들을 공개합니다"
message[3]="Have a Nice Day"

// 티커의 크기를 설정 하세요
var tickerwidth=400 // 가로
var tickerheight=300 // 세로

// 글꼴을 설정 하세요
var tickerfont="Arial"

// 글자의 크기
var tickerfontsize=5

// 글자의 색상
var tickerfontcolorpre="#FFFF00"
var tickerfontcolormark="#FFFFFF"
var tickerfontcolorafter="#333333"

// 배경색상
var backgroundcolor="black"

// 각 단어간의 지연시간 (1000 = 1 초)
var pausebetweenwords=200

// 각 메세지간의 지연시간 (1000 = 1 초)
var pausebetweenmessages=1000

// 페이드 효과 이후의 지연시간 (1000 = 1 초)
var pauseafterfade=1000

// 애니메이션 후 이동될 페이지
var linkurl="http://www.yahoo.com"

var transparency=100
var transparencystep=5
var windowheight=0
var windowwidth=0
var x_pos=0
var y_pos=0
var i_message=-1
var messagesplit=""
var i_messagesplit=0
var i_mark=0
var tickercontent
var pausefade=40
var linkurlloaded=false
var oneloopfinished=false
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0

function splitmessage() {
        transparency=100
        if (ie) {
                i_message++
                if (i_message>=message.length) {oneloopfinished=true}
                if (i_message>=message.length) {i_message=0}
                i_mark=0
                messagesplit=message[i_message].split(" ")
                for (i=0;i<messagesplit.length;i++) {
                        messagesplit[i]=messagesplit[i]+" "
                }
                messagesplit[messagesplit.length]=" "

                document.all.ticker.filters.alpha.opacity=transparency
                if (oneloopfinished && linkurlloaded) {
                        document.location.href=linkurl
                }
                else {
                        runticker()
                }
        }
        else if (ns6 || ns4) {
                i_message++
                if (i_message>=message.length) {document.location.href=linkurl}
                else {
                        i_mark=0
                        messagesplit=message[i_message].split(" ")
                        for (i=0;i<messagesplit.length;i++) {
                                messagesplit[i]=messagesplit[i]+" "
                        }
                        messagesplit[messagesplit.length]=" "
                        if (ns6) {
                                document.getElementById('ticker').style.MozOpacity=transparency/100
                        }
                        runticker()
                }
        }
        else {
                document.location.href=linkurl
        }
}

function runticker() {
        if (i_mark<messagesplit.length) {
                gettickercontent()
                        
                if (ie) {
                        ticker.innerHTML=tickercontent
                }
                if (ns6) {
                        document.getElementById('ticker').innerHTML=tickercontent
                }
                if (ns4) {
                        document.ticker.document.write(tickercontent)
                        document.ticker.document.close()
                }
                  i_mark++
                                
                  var tickertimer=setTimeout("runticker()",pausebetweenwords)

        }
        else {
                clearTimeout(tickertimer)
                setTimeout("fade()",pausebetweenmessages)
        }
}

function fade() {
        if (transparency>0){
                transparency-=transparencystep
                if (ie) {
                        document.all.ticker.filters.alpha.opacity=transparency
                }
                if (ns6) {
                        document.getElementById('ticker').style.MozOpacity=transparency/100
                }
                var fadetimer=setTimeout("fade()",pausefade)
        }
        else {
                clearTimeout(fadetimer)
                setTimeout("splitmessage()",pauseafterfade)
        }
}

function gettickercontent() {
                
        tickercontent="<table width="+tickerwidth+" height="+tickerheight+" cellpadding=0 cellspacing=0 border=0><tr valign=middle><td align=center>"
        tickercontent+="<font face=\""+tickerfont+"\" size="+tickerfontsize+" color=\""+tickerfontcolorpre+"\">"
        for (i=0;i<i_mark;i++) {
                tickercontent+=messagesplit[i]
        }
        tickercontent+="</font>"
        tickercontent+="<font face=\""+tickerfont+"\" size="+tickerfontsize+" color=\""+tickerfontcolormark+"\">"
        tickercontent+=messagesplit[i_mark]
        tickercontent+="</font>"
        tickercontent+="<font face=\""+tickerfont+"\" size="+tickerfontsize+" color=\""+tickerfontcolorafter+"\">"
        for (i=(i_mark+1);i<messagesplit.length;i++) {
                tickercontent+=messagesplit[i]
        }
        tickercontent+="</font>"
        tickercontent+="</td></tr></table>"

}

setposition()
function setposition() {
        if (ie) {
                windowheight=document.body.clientHeight
                windowwidth=document.body.clientWidth
        }
        if (ns6) {
                windowheight=window.innerHeight
                windowwidth=window.innerWidth
        }
        if (ns4) {
                windowheight=window.innerHeight
                windowwidth=window.innerWidth
        }
        x_pos=(windowwidth-tickerwidth)/2
        y_pos=(windowheight-tickerheight)/2
        document.bgColor=backgroundcolor
}
function jump() {
        linkurlloaded=true
}

if (ie) {
        document.write("<div id=\"ticker\" style=\"position:absolute;top:"+y_pos+"px;left:"+x_pos+"px;width:"+tickerwidth+"px;height:"+tickerheight+"px;overflow:hidden\;filter:alpha(opacity=100);-moz-opacity:100\">")
        document.write("</div>")
        document.write("<iframe onLoad=\"jump()\" src="+linkurl+" width=0 height=0></iframe>")
        splitmessage()
}
else if (ns6) {
        document.write("<div id=\"ticker\" style=\"position:absolute;top:"+y_pos+"px;left:"+x_pos+"px;width:"+tickerwidth+"px;height:"+tickerheight+"px;overflow:hidden\;-moz-opacity:100\">")
        document.write("</div>")
        splitmessage()
}
else if (ns4) {
        document.write("<layer name=\"ticker\" width="+tickerwidth+" height="+tickerheight+" top="+y_pos+" left="+x_pos+">")
        document.write("tickercontent")
        document.write("</layer>")
        document.close()
        window.onload=splitmessage
}
else {
        document.location.href=linkurl
}
//-->
</script>

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

</body>
</html>