スタッフロール－JavaScript入門

HOME
JavaScript入門
スタッフロール

今回は映画やドラマのラストで、キャストやスタッフの一覧が下から上に流れるスタッフロールをJavaScriptで作ってみたいと思います。

スタッフロールのスクリプト

では最初に、640×480程度のサブウィンドウを画面中央に表示させましょう。 HTMLのBODY内に、以下のように記入なさってください。

<script>

function winOpen()
{
  var w=(screen.width-640)/2;
  var h=(screen.height-480)/2;
  
  window.open("staffroll.html","sub","width=640,height=480,"+
    "left="+w+",top="+h+",scrollbars=no,menubar=no,toolbar=no");
}

</script>

<form>
<input type="button" value="staffroll" onclick="winOpen()">
</form>

次にstaffroll.htmlを作ります。 bodyタグ以下に下の文字をコピー＆ペーストしてみてください。 bodyタグ内にはonloadイベントを記入し、画面をスクロールさせる関数scroll()を呼び出します。

<body onload="scroll()">
<br><br><br><br><br><br><br><br><br><br>
STAFF<br>
<br><br><br>
企画<br>パズルネット智慧<br><br><br>
構成<br>パズルネット智慧<br><br><br>
プログラム<br>パズルネット智慧<br><br><br>
製作環境<br>UTF-8Writer<br>http://pori2.net/<br><br><br>
技術提供<br>JavaScript入門<br>http://pori2.net/js/<br><br><br>
<br><br><br>
<span style="font-size:80pt">Fin</span><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</body>

さらに、ヘッダーでスタイルを指定します。背景を黒色，文字サイズを20ptで太字、センタリング，文字色を白色にします。以下のスタイルシートをstaffroll.htmlのヘッダー部分に記入してみてください。

body
{
  background-color:black;
  font-size:20pt;
  font-weight:bold;
  text-align:center;
  color:white;
}

前置きが長くなりましたが、いよいよスタッフロールのスクリプトです。中身はわずか2行だったりします。 staffroll.htmlのヘッダーに、以下のスクリプトを記入なさってください。

<script>

function scroll()
{
  scrollBy(0,2);
  setTimeout("scroll()",100);
}

</script>

＜サンプル＞

scrollBy()を使って、画面を2px下にずらします。そしてsetTimeout()を用いて、100ミリ秒毎に関数scroll()を呼び出します。これで画面が徐々に下に移動し、文字が上に流れているように見えるのです。もっと滑らかに見せたければ、移動量を1pxにして呼び出し間隔を半分にしてみてください。

スタッフロールを実際に作る場合は、最初と最後は改行タグではなく、 透明画像を用いて縦幅を調整するとベターです。画像だとheight属性を使ってきちんとした縦幅を指定できるからです。

<img src="blank.gif" height="480" width="1" alt=""><br>
STAFF<br>
…（以下略）

例えば上のように最初に縦幅480pxの透明画像を入れておけば、画面を開いた時には何も表示されておらず、すぐに下から「STAFF」の文字が現れることになります。

あとは音楽でも流せば本物のスタッフロールに見せることができます！

前へ次へ