スタッフロールのようなものを作りたいです。

質問

Javascriptを使い映画のエンディングのスタッフロールのように、
文字が下から上へ流れていくものを作りたいです。
Googleで検索してみたのですが、以下の条件に合うものが見つからなかったので、
もし以下の条件に合うjavascriptをご存知の方は教えてください。

・ページを読み込んだ時点から自動でスクロールを開始し、
　下から上へのスクロールを永久に繰り返す。
・スクロールするテキストの色を変えたりできるようにしたいので
　テキストエリアは使わない。
（http://allabout.co.jp/computer/hpcreate/closeup/CU20050922A/index.htm
　において解説されているようなボックスを使いたいです。
　もし無理ならテキストが流れる範囲を指定（CSS等で）できればそれでいいです。）
・スクロールの早さ等を調節できる。
・HTML の MARQUEE タグは使わない。

よろしくお願いします。

回答No.4

yambejp · ベストアンサー

>個別にCSS
classをつかってstyleで指定すればよろしいかと
赤や白のつけかたに法則性があればプログラムで
処理もできそうですが、一応今回は各行にclassを
交互につけておきました。これは任意に変更して
ください。

>これを<br />に変えたほうが良い
innerHTMLから<br />を見ると「<BR>」として
認識されるようです。なので下３行は「<br>」の
ままで大丈夫です。わざわざtoLowerCase()を
しているのはそういうわけです。

それを踏まえるとこんな感じでしょうか？

<style type="text/css">
span.aka{color:#ff0000;}
span.shiro{color:#ffffff;}
table{background-color:#000000;}
</style>
<table width=600>
<tr><td>
<span id="view">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</span>
</td>
</tr>
</table>
<hr>
<form>
<input type="button" onClick="clearInterval(timeid)" value="STOP">
<input type="button" onClick="clearInterval(timeid);timeid=setInterval('stuffroll()',1000)" value="START">
</form>
<script language=javascript>
text=Array("<span class='aka'>1行目</span>",
"<span class='shiro'>2行目</span>",
"<span class='aka'>3行目</span>",
"<span class='shiro'>4行目</span>",
"<span class='aka'>5行目</span>",
"<span class='shiro'>6行目</span>",
"<span class='aka'>7行目</span>",
"<span class='shiro'>8行目</span>",
"<span class='aka'>9行目</span>",
"<span class='shiro'>10行目</span>");
var count=0;
var viewarea=document.getElementById('view').innerHTML;
function stuffroll(){
if(count==text.length) count=0;
viewarea +=text[count]+"<br>";
var tmp = viewarea.toLowerCase().split("<br>")
tmp.shift();
viewarea=tmp.join("<br>");
document.getElementById('view').innerHTML=viewarea ;
count++;
}
timeid=setInterval("stuffroll()",1000);
</script>

回答No.3

yambejp

＃２です。
はて？私が書いたのは全画面スクロールじゃない
ですが・・・ちょうどテーブルで囲むとわかりやすい
かもしれません。
こういうことではないのでしょうか？

<table border=1 width=600>
<tr><td>
<span id="view">
<br>
<br>
<br>
<br>
<br>
<br>
</span>
</td>
</tr>
</table><hr>test
<script language=javascript>
text=Array("1行目","2行目","3行目","4行目","5行目","6行目","7行目","8行目","9行目","10行目");
var count=0;
var viewarea=document.getElementById('view').innerHTML;
function stuffroll(){
if(count==text.length) count=0;
viewarea +=text[count]+"<br>";
var tmp = viewarea.toLowerCase().split("<br>")
tmp.shift();
viewarea=tmp.join("<br>");
document.getElementById('view').innerHTML=viewarea ;
count++;
}
timeid=setInterval("stuffroll()",500);
</script>

お礼

申し訳ありません。全画面スクロールというのは私の勘違いでした。
２つお聞きしたいことがあるのですが、「１行目は赤色、２行目は白色」というように個別にCSSを使って装飾をするにはどうすればよいのでしょうか？
それと、書き忘れていたことなのですが教えていただいたJavascriptはブログで使うつもりなのですがそのブログは、XHTMLで書かないといけないので<br>は<br />と書かないといけません。
下のほうに３つ<br>が書いてありますがこれを<br />に変えたほうが良いと思うのですがそうすると、Javascriptが正しく動作しません。どうすればよいでしょうか？

回答No.2

yambejp

こんなんでどうでしょう？

スクロール範囲はspanの<br>の数だけ、
スピードはsetIntervalの引数（ミリ秒）で指定します。

<span id="view">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</span>
<hr>
<form>
<input type="button" onClick="clearInterval(timeid)" value="STOP">
<input type="button" onClick="clearInterval(timeid);timeid=setInterval('stuffroll()',100)" value="START">
</form>
<script language=javascript>
text=Array("1行目","2行目","3行目","4行目","5行目","6行目","7行目","8行目","9行目","10行目");
var count=0;
var viewarea=document.getElementById('view').innerHTML;
function stuffroll(){
if(count==text.length) count=0;
viewarea +=text[count]+"<br>";
var tmp = viewarea.toLowerCase().split("<br>")
tmp.shift();
viewarea=tmp.join("<br>");
document.getElementById('view').innerHTML=viewarea ;
count++;
}
timeid=setInterval("stuffroll()",100);
</script>

お礼

m035 さんの回答に対する私のお礼と同じことになり申し訳ありません。
私の説明不足で大変申し訳ないのですが、http://allabout.co.jp/computer/hpcreate/closeup/CU20050922A/index.htmで解説されているようなボックスの中のテキストをスタッフロールのように下から上へスクロールさせることは可能でしょうか？
答えてもらったjavascriptですと、画面全体の下から上へスクロールされてしまいますので。
（最初に投稿したときには、上記のような説明を書き、私個人のサイトにスクロールさせたいボックスを載せたページをアップしリンクしておいたのですが、規約違反ということでその部分だけ削除されてしまいました。）

回答No.1

m035

一応、作ってみましたが、
>・スクロールするテキストの色を変えたりできるようにしたいのでテキストエリアは使わない。
HTMLをそのまま書くことが出来ます。
>・スクロールの早さ等を調節できる。
閲覧者が変えることは出来ませんので、動的に変更したいときは言ってください。
また、ウィンドウサイズを取得していますので、本来はブラウザごとに動作を分けるべきなんでしょうがしていません。
気になる場合は参考URLをご覧あれ。

<html>
<head>
<title>staff</title>
<script type="text/javascript">
<!--
var step=1;//一回ごとの移動量(単位はピクセル)、増やせばよりはやく動きます
var interval=50;//移動させる時間の間隔(単位はミリ秒)、減らせばよりはやく動きます
//上記2つの変数でスピードを調節してください。ただし、stepを増やすか
//intervalを減らすと動きがガクガクしますので注意。
var y,s,timer=setTimeout("",0);

function set(){
if(window.innerHeight)s=window.innerHeight;
else if(document.body.clientHeight)s=document.body.clientHeight;
else s=screen.height;
y=s;
document.getElementById("staff").style.top=y;
loop();
}

function loop(){
clearTimeout(timer);
(y+document.getElementById("staff").offsetHeight)<0?y=s:y-=step;
document.getElementById("staff").style.top=y
timer=setTimeout("loop()",interval);
}
//-->
</script>
</head>
<body onload="set()" style="overflow:hidden">
<div id="staff" style="position:absolute;top:2000px;left:0px">
ここに内容を入れてください。<br>
HTMLがそのまま記述できます。<br>
また、文字の最後が画面の外に消えた瞬間に、<br>
下から繰り返されますので、<br>
一回ずつの間隔がほしいときは<br>
brタグなどでスタッフロールの最下部に、<br>
空白を作ってください。<br>
適当に作りましたので動作確認は<br>
IE6とFirefox1.5でしかしていません。
</div>
</body>
</html>

参考URL：

http://www.sasaraan.net/program/js/jswndstate.html

お礼

私の説明不足で大変申し訳ないのですが、http://allabout.co.jp/computer/hpcreate/closeup/CU20050922A/index.htmで解説されているようなボックスの中のテキストをスタッフロールのように下から上へスクロールさせることは可能でしょうか？
答えてもらったjavascriptですと、画面全体の下から上へスクロールされてしまいますので。
（最初に投稿したときには、上記のような説明を書き、私個人のサイトにスクロールさせたいボックスを載せたページをアップしリンクしておいたのですが、規約違反ということでその部分だけ削除されてしまいました。）