文字を１文字ずつ出し、上へスクロールさせる


■動作ブラウザ　【 IE:5.0　 NN:6.0　 Safari:1.0】
Internet Explorer Netscape Navigator Opera iCab Safari
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 7.0 6.0 7.0 2.x 1.0 1.1
Windows × × - ○ ○ ○ × × × × ○ ○ ○ ○ - - -
Macintosh × × × ○ - - × × × × ○ ○ ○ ○ × ○ ○
UNIX - - - - - - × × × × ○ ○ ○ ○ - - -

ポイント for (i=0; i<txt.length; i++)
{
document.write('<div id="Lay'+i+'" style="position:absolute;top:-999px;left:0px;">'+txt.charAt(i)+'</div>');
}
説　　明 文字を１文字ずつ出し、上へスクロールさせるには文字の長さの分だけレイヤーを作成します。実際には<div>タグ＋スタイルシートをdocument.write()を使って文字数分だけ生成する事になります。あとは生成したレイヤーをタイマーを使って上に１文字ずつ移動させます。
サンプル <html>
<head>
<title>文字を１文字ずつ出し、上へスクロールさせる</title>
<script language="JavaScript"><!--
txt = "上に参りま〜す";
str = new Array();
strX = new Array(); //　表示X座標
strY = new Array(); //　表示Y座標
dx = 16; //　文字の横方向の間隔
dy = 32; //　文字の縦方向の間隔
speedY = 4; //　文字の移動速度

//　文字の位置を初期化
function initText()
{
for (i=0; i<txt.length; i++)
{
str = txt.charAt(i);
strX[i] = i * dx;
strY[i] = document.body.clientHeight + i * dy;
}
moveText();
}

//　文字のレイヤーを作成
function setLayer()
{
for (i=0; i<txt.length; i++)
{
document.write('<div id="Lay'+i+'" style="position:absolute;top:-999px;left:0px;">'+txt.charAt(i)+'</div>');
}
}

//　文字の移動
function moveText()
{
for (i=0; i<txt.length; i++)
{
document.getElementById("Lay"+i).style.left = strX[i];
document.getElementById("Lay"+i).style.top = strY[i];
if (strY[i] > 1) strY[i] -= speedY;
}
setTimeout("moveText()",100); //　移動速度
}
// --></script>
</head>
<body onLoad="initText()">
<script language="JavaScript"><!--
setLayer();
// --></script>
</body>
</html>
補足説明 Safariで動かす場合には
strY[i] = document.body.clientHeight + i * dy;
を
strY[i] = window.innerHeight + i * dy;
にしてください。

■サンプルスクリプトを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!
写真素材 PIXTA