Rico.jsを使うと手軽にアニメーション処理を行うことができます。まず、Rico.jsを以下のサイトからダウンロードします。
http://openrico.org/
rico.jsファイルをダウンロードするだけで準備はできあがりです。実際に使用する場合にはscriptタグで読み込むようにします。これは同一ディレクトリにある場合には以下のように指定します。
<script type="text/javascript" src="rico.js"></script>
Rico.jsを利用するにはprototype.jsが必要ですので、prototype.jsも同様に読み込んでおく必要があります。
まず、簡単なフェードイン処理を行ってみましょう（Operaは不透明度処理をサポートしていないので動作しません）。フェードイン／フェードアウトなどの処理を行うにはRico.Effect.FadeTo()を使います。Rico.Effect.FadeToの書式は以下のようになります。
Rico.Effect.FadeTo(ID名,設定する不透明度,ミリ秒,ステップ数)
例えばdivタグに指定されたID名がboxで100%の不透明度に0.1秒ごと、合計10ステップで表示したいとします。この場合は以下のように使用します。
new Rico.Effect.FadeTo("box", 1.0, 100, 10);
以下のサンプルではボタンをクリックすると、文字がフェードインします。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Rico.jsフェードイン処理</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="rico.js"></script>
<script type="text/javascript"><!--
function fadein()
{
new Rico.Effect.FadeTo("box", 1.0, 100, 10);
}
// --></script>
</head>
<body>
<h1>Rico.jsフェードイン処理</h1>
<form>
<input type="button" value="フェードイン" onClick="fadein()">
</form>
<div id="box">Rico.jsを使ったフェードインサンプル</div>
</body>
</html>
もっとゆっくりとフェードインするようにするにはステップ数を細かくするか秒数を遅くします。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Rico.jsフェードイン処理</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="rico.js"></script>
<script type="text/javascript"><!--
function fadein()
{
new Rico.Effect.FadeTo("box", 1.0,
200, 50);
}
// --></script>
</head>
<body>
<h1>Rico.jsフェードイン処理</h1>
<form>
<input type="button" value="フェードイン" onClick="fadein()">
</form>
<div id="box">Rico.jsを使ったフェードインサンプル</div>
</body>
</html>
フェードイン、フェードアウトの両方の処理を行う場合には以下のようにします。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Rico.jsフェードイン／フェードアウト処理</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="rico.js"></script>
<script type="text/javascript"><!--
function fade(n)
{
new Rico.Effect.FadeTo("box", n,200, 20);
}
// --></script>
</head>
<body>
<h1>Rico.jsフェードイン／フェードアウト処理</h1>
<form>
<input type="button" value="フェードアウト" onClick="fade(0)">
<input type="button" value="フェードイン" onClick="fade(1.0)">
</form>
<div id="box">Rico.jsサンプル</div>
</body>
</html>
フェードイン／フェードアウト処理を行わせる場合にスタイルシートでposition:absoluteなどを指定する必要はありません。ただし、最初の表示状態（今回の場合は不透明度）は以下のように指定しておく必要があります。
filter:alpha(opacity=0);
opacity:0;
-moz-opacity:0;
Internet Explorerの場合はfilter:alpha()で指定します。opacityで不透明度を指定しますが、0が完全な透明100が完全な不透明になります。Safariの場合にはopacityで指定します。0が完全な透明で1.0が完全な不透明になります。小数値で指定する点に注意してください。Firefoxの場合には-moz-opacityで指定します。指定できる値はSafariと同じで0が完全な透明で1.0が完全な不透明になります。
[
Rico.jsを使った移動処理]
[
目次へ]
(2006.2.18)