Animation.Rasterは
ラスタースクロールを行うためのライブラリです。ラスタースクロールというのは1990年代のゲームなどで使われた技法で、画面に表示される水平ライン（ラスター）の表示位置をずらすものです。このずらし具合を水平線ごと（ラスターごと）垂直方向に微妙にずらしていくことで、うねうねした感じを出す事ができます。
ラスタースクロールと同じような処理はWindows版Internet Explorer 4以降ではWaveフィルタを使えば可能です。しかし、他のブラウザではフィルタ機能がサポートされていないため、このようなラスタースクロールの処理は無理でした。そこで登場したのがAnimation.Rasterという事になります。
それでは実際にやってみましょう。ここでは簡単な画像をラスタースクロールさせてみます。
まず、以下のURLからRaster.jsファイルをダウンロードします。
http://www.kawa.net/works/js/animation/raster.html
Animation.Rasterクラス（ライブラリ）の使用方法は簡単です。まず、ラスタースクロールさせたい画像を用意します。次にimgタグにID名を指定します。ここでは以下のようにphotoというID名を指定します。
<img src="bg.jpg"
id="photo">
指定したID名をnew Animation.Rasterの最初のパラメータとして指定します。
new Animation.Raster(
"photo")
生成されたオブジェクトに対してscroll()メソッドを適用すれば画像をラスタースクロールさせることができます。（実際のサンプルを
実行する）
(new Animation.Raster("photo")).
scroll();
<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("photo")).scroll();
}
// --></script>
</head>
<body>
<h1>シンプルなラスタースクロール</h1>
<form>
<input type="button" value="ラスタースクロール開始" onClick="rasterScroll()"><br>
</form>
<img src="bg.jpg" id="photo">
</body>
</html>
Animation.Rasterは画像だけでなくHTML要素もラスタースクロールさせることができます。これは次項目で説明します。
[
目次へ]
(2006.4.27)