본문 바로가기

javascript

롤러코스트 텍스트 효과

<HTML>
<HEAD>
<TITLE> 자바스크립트 소스뱅크 </TITLE>

</HEAD>

<!-- 1. 아래의 코드를 <BODY>태그에 복사해 넣으세요 -->

<BODY onload="doWave(0)">


<!-- 2. 에디터를 사용하여 아래의 코드를 <BODY>태그와 </BODY> 태그 사이에 복사해 넣으세요 -->

<script language="JavaScript">

// 사용할 텍스트를 입력 합니다

var theText = "JavaScript Source Bank";

function nextSize(i,incMethod,textLength)
{
if (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
}

function sizeCycle(text,method,dis)
{
        output = "";
        for (i = 0; i < text.length; i++)
        {
                size = parseInt(nextSize(i +dis,method,text.length));
                output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
        }
        theDiv.innerHTML = output;
}

function doWave(n)
{  
        sizeCycle(theText,1,n);
        if (n > theText.length) {n=0}
        setTimeout("doWave(" + (n+1) + ")", 50);
}
</script>
<div ID="theDiv" align="center">

</div>

</BODY>
</HTML>