書式
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>