文字を１文字ずつ表示し、１行単位でスクロールさせる


■動作ブラウザ　【 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 - - - - - - × × × × ○ ○ ○ ○ - - -

ポイント if (line < message.length)
{
text += message[line].charAt(count);
count++;
if (count > message[line].length)
{
line++;
strY -= dy;
text += "<br>";
count = 0;
}
}
document.getElementById("scrollText").innerHTML = text;
document.getElementById("scrollText").style.left = strX;
document.getElementById("scrollText").style.top = strY;
説　　明 文字を１文字ずつ出し、１行単位で上へスクロールさせるには文字を表示するレイヤーを用意し、innerTextまたはinnerHTMLを使って文字を１文字ずつ表示させます。改行は文字の長さを超えたら<br>タグを付加して改行します。これはinnerHTMLを使って表示させているため、このような改行処理が必要になります。改行時にレイヤーを１行分上に移動させます。あとはタイマーを使って１文字ずつ表示させる関数を呼び出します。
サンプル <html>
<head>
<title>文字を１文字ずつ出し、上へスクロールさせる</title>
<script language="JavaScript"><!--
message = new Array( "時は２１世紀。",
"人類は環境汚染と重税に苦しんでいた。",
"国会議員はアテにならない払い損の国民年金には",
"見向きもせず、外交でごまかした。",
"そして２２世紀。",
"２１世紀と同じ状態で何も変わらなかった...",
"　　　　　　　",
"　　　　　　　");
dy = 18; //　文字の縦方向の間隔
speed = 50; //　文字の表示速度

//　文字の表示位置を初期化
function initText()
{
strX = 10; //　文字の表示X座標
strY = document.body.clientHeight - dy; //　文字の最初の表示
text = ""; //　表示テキスト
count = 0; //　文字の表示番号
line = 0; //　文字の表示行数番号
moveText();
}

//　文字の移動
function moveText()
{
if (line < message.length)
{
text += message[line].charAt(count);
count++;
if (count > message[line].length)
{
line++;
strY -= dy;
text += "<br>";
count = 0;
}
}
document.getElementById("scrollText").innerHTML = text;
document.getElementById("scrollText").style.left = strX;
document.getElementById("scrollText").style.top = strY;
setTimeout("moveText()",speed); //　移動速度
}
// --></script>
</head>
<body onLoad="initText()">
<div id="scrollText" style="position:absolute;top:0px;left:0px;font-size:12px;line-height:18px;"></div>
</body>
</html>
補足説明 Safariで動かす場合には
strY = document.body.clientHeight - dy;
を
strY = window.innerHeight - dy;
にしてください。

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