본문 바로가기

javascript

텍스트가 점점 커지는 FADE IN 효과

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Jasko Sample Script </TITLE>
<META NAME="Author" CONTENT="JASKO">
</HEAD>

<BODY>

<!---- 아래의 방법으로 원하는 위치에 복사 해 넣으세요 ------------------>

<script>

// 메세지를 설정 하세요
var message="WELCOME TO JASKO HAVE A NICE DAY "

// 적용하고자 하는 글꼴을 차례대로 설정 하세요
var messagefont=new Array("Arial Black","Verdana","Impact","Comic Sans MS")

// 색상도 설정 하세요
var messagecolor=new Array("red","olive","888888","purple")

// 위치를 알려주세요
var positionleft=200
var positiontop=10
</script>

<script>
var timer
var marginright=0
var i_fadestrength=5
var i_message=0
var i_messagecolor=0
var i_messagefont=0
var step=1
var maxfontsize=220
var fontsizefactor=maxfontsize/100
var content
var textboxwidth=0
var bodywidth=0
message=message.split(" ")


function setmessage() {
        if (i_message>=message.length) {i_message=0}
        if (i_messagecolor>=messagecolor.length) {i_messagecolor=0}
        if (i_messagefont>=messagefont.length) {i_messagefont=0}
        content="<nobr><font color="+messagecolor[i_messagecolor]+" face="+messagefont[i_messagefont]+">"+message[i_message]+"</font><nobr>"
        textbox.innerHTML=content
        i_message++
        i_messagecolor++
        i_messagefont++
        timer=setTimeout("resizemessage()",500)
}

function resizemessage() {
if (i_fadestrength<120) {
        textbox.filters.alpha.opacity=Math.floor(100-i_fadestrength)
        document.all.textbox.style.fontSize=i_fadestrength*fontsizefactor
        document.all.textbox.style.posLeft=positionleft-(Math.floor(i_fadestrength/1.1*fontsizefactor))
        document.all.textbox.style.posTop=positiontop
        document.all.textbox.style.width=bodywidth-document.all.textbox.style.posLeft-5
        document.all.textbox.style.overflowX="hidden"
        document.all.textbox.style.visibility="visible"
        step+=1.5
        i_fadestrength+=step
        timer=setTimeout("resizemessage()",50)
}
else {
        clearTimeout(timer)
        i_fadestrength=0;
        step=1;
        setmessage()
        }
}
if (document.all) {
        document.write("<DIV id='textbox' style='position:absolute;font-family:Verdana;filter:alpha(opacity=0);'></DIV>")
        document.write("<DIV style='position:relative;'>")
}

if (document.all) {
        bodywidth=document.body.clientWidth-5
        setmessage()
}

</script>

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

</BODY>
</HTML>