Animation.Rasterはページ上に表示されているものであれば、基本的にはラスタースクロールさせることが可能です。以下のサンプルはテーブルをラスタースクロールさせるものです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブルのラスタースクロール</title>
<script type="text/javascript" src="Raster.js"></script>
<script type="text/javascript"><!--
function rasterScroll()
{
(new Animation.Raster("table1")).scroll();
}
// --></script>
</head>
<body>
<h1>ページ上の内容もラスタースクロール</h1>
<form>
<input type="button" value="ラスタースクロール開始" onClick="rasterScroll()"><br>
</form>
<table id="table1" border="1" bgcolor="#ffe0e8">
<tr><th>ラスタースクロール</th></tr>
<tr><td bgcolor="yellow">昔は水平同期信号検知したのに...</td></tr>
<tr><td bgcolor="#dddddd">今はスクリプトでできる時代...</td></tr>
</table>
</body>
</html>
標準ではラスタースクロールの幅が4ピクセルになっています。移動速度やラスター数はオプションで指定することができます。
指定できるオプションには以下のものがあります。
| オプション名 | 意味 |
|---|
| lineHeight | スクロールさせるラインの高さ（ピクセル） |
| clip | 枠からはみ出した部分を隠すか否か（デフォルトtrue） |
| background | アニメーション時の背景色 |
| downSeconds | 上から落ちてくるアニメーションの秒数 |
| fadeSeconds | 落ちた後、揺れの幅が収まるまでの秒数 |
| waveSpeed | 揺れが移動する速度 |
| onComplete | アニメ終了後に呼ばれるコールバック関数 |
以下のサンプルはラスタースクロールする高さを1ピクセル、速度を0.1秒にしたものです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブルのラスタースクロール</title>
<script type="text/javascript" src="Raster.js"></script>
<script type="text/javascript"><!--
function rasterScroll()
{
var rasterObject = new Animation.Raster("table1");
rasterObject.lineHeight = 1;
rasterObject.waveSpeed = 0.1;
rasterObject.scroll();
}
// --></script>
</head>
<body>
<h1>ラスタースクロールオプションを指定</h1>
<form>
<input type="button" value="ラスタースクロール開始" onClick="rasterScroll()"><br>
</form>
<table id="table1" border="1" bgcolor="#ffe0e8">
<tr><th>ラスタースクロール</th></tr>
<tr><td bgcolor="yellow">昔は水平同期信号検知したのに...</td></tr>
<tr><td bgcolor="#dddddd">今はスクリプトでできる時代...</td></tr>
</table>
</body>
</html>
テーブル全体ではなくテーブル内にある画像だけをラスタースクロールさせることもできます。また、フォームなどもラスタースクロールさせることができます。以下のサンプルはテーブル内にある画像だけをラスタースクロールさせるものです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>テーブル内画像のラスタースクロール</title>
<script type="text/javascript" src="Raster.js"></script>
<script type="text/javascript"><!--
function rasterScroll()
{
var rasterObject = new Animation.Raster("photo");
rasterObject.lineHeight = 1;
rasterObject.waveSpeed = 0.1;
rasterObject.scroll();
}
// --></script>
</head>
<body>
<h1>テーブル内でラスタースクロール</h1>
<form>
<input type="button" value="ラスタースクロール開始" onClick="rasterScroll()"><br>
</form>
<table border="1" bgcolor="#ffe0e8">
<tr><th>ラスタースクロール</th></tr>
<tr><td bgcolor="yellow">昔は水平同期信号検知したのに...</td></tr>
<tr><td bgcolor="#dddddd">今はスクリプトでできる時代...</td></tr>
<tr><td bgcolor="#eeff00">テーブル内でもうまく動く...</td></tr>
<tr><td><img src="bg.jpg" id="photo"></td></tr>
</table>
</body>
</html>
[
目次へ]
(2006.10.15)