ラスタースクロールさせる

書式

rasterObj = new Animation.Raster(elementID)

rasterObj : ラスターオブジェクト
elementID : エレメントのID

説明

 エレメントや画像をラスタースクロールさせるにはAnimation.Raster()を使います。パラメータにはラスタースクロールするエレメントのIDを指定します。ラスタースクロールできるのは画像だけでなくページ上に表示されているエレメントのほとんどを対象とすることができます。
 ラスターオブジェクトには以下のプロパティがあり、細かい指定が可能になっています。

プロパティ名説明
lineHeightスクロールさせるラインの高さ(ピクセル)
clip枠からはみ出した部分を隠すか否か(デフォルトtrue)
backgroundアニメーション時の背景色
downSeconds上から落ちてくるアニメーションの秒数
fadeSeconds落ちた後、揺れの幅が収まるまでの秒数
waveSpeed揺れが移動する速度
onCompleteアニメ終了後に呼ばれるコールバック関数

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="Raster.js"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
var rasterObj = new Animation.Raster( "photo" );
rasterObj.lineHeight = 1;
rasterObj.clip = false;
rasterObj.background = "#ffffff";
rasterObj.downSeconds = 1.0;
rasterObj.fadeSeconds = 4.0;
rasterObj.waveSpeed = 0.5;
rasterObj.onComplete = function () { alert("E´AE´jE´A°A°[E´VE´a´E´i`e`Io´π")};
rasterObj.scroll();
}
// --></script>
</head>
<body>
<h1>E´a^E´XE´^A°[E´XE´NE´cA°[E´a</h1>
<div id="photo"><img src="sample.jpg" width="384" height="216" alt="i¨xe´me´R"></div>
</body>
</html>