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


動作ブラウザ 【 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>');
}
説  明 文字を1文字ずつ出し、上へスクロールさせるには文字の長さの分だけレイヤーを作成します。実際には<div>タグ+スタイルシートをdocument.write()を使って文字数分だけ生成する事になります。あとは生成したレイヤーをタイマーを使って上に1文字ずつ移動させます。
サンプル <html>
<head>
<title>文字を1文字ずつ出し、上へスクロールさせる</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