Script.aculo.usで実現できる、さまざまな視覚効果

Script.aculo.us入門 （2）

フェードイン、フェードアウト

　続いて、イメージのフェードイン、フェードアウトです。これは、それぞれ「Effect.Appear」「Effect.Fade」というメソッドとして用意されています。これらは、それぞれ次のように呼び出します。

フェードイン

Effect.Appear( タグ , オプション設定 );

フェードアウト

Effect.Fade( タグ , オプション設定 );

利用可能なオプション

オプション名	説明
from	開始時の透過度を0～1の間の実数で指定。
to	終了時の透過度を0～1の間の実数で指定。
duration	エフェクトにかかる時間を秒数で指定。

　2つのメソッドは、いずれもfromとtoは必須のオプションと考えてください。これらで開始と終了の透過度を指定します。これは0が透明、1が不透明となります。では、実際に簡単な例を挙げておきましょう。先ほどのイメージを表示するサンプルを、フェードイン、フェードアウトを使った形で書き直したものです。

<a href="#" onclick="Effect.Appear('img1',{from: 0, to: 1.0}); return false;">show Image!</a>
<br />
<a href="#" onclick="Effect.Fade('img1',{from: 1.0, to: 0}); return false;">
    <img id="img1" style="width:100px; height:100px; display: none;" src="./img/image1.jpg" />
</a>

クリックするとイメージが半透明になりながら現れてくる。

上から引き出される視覚効果

　画面の上のほうから引き出すようにして現れる効果もあります。これは2種類のものが用意されています。「Blind（ブラインド）」と「Slide（スライド）」です。

Blindの視覚効果

<a href="#" onclick="Effect.BlindDown('target_div',{duration: 3}); return false;">show Image!</a>
<br />
<a href="#" onclick="Effect.BlindUp('target_div',{duration: 3}); return false;">
    <div id="target_div" style="display:none;">
        <img id="img1" style="width:100px; height:100px;" src="./img/image1.jpg" />
    </div>
</a>

クリックするとイメージが上から現れてくる。

Slideの視覚効果

<a href="#" onclick="Effect.SlideDown('target_div',{duration: 3}); return false;">show Image!</a>
<br />
<a href="#" onclick="Effect.SlideUp('target_div',{duration: 3}); return false;">
    <div id="target_div" style="display:none;">
        <img id="img1" style="width:100px; height:100px;" src="./img/image1.jpg" />
    </div>
</a>

クリックするとイメージが上から引き出されてくる。

　Blindは、上に乗せてあった布を下に引き抜くようにしてイメージが現れます。これに対しSlideは、上からイメージそのものが、引き出しを引くようにして引き出されてきます。「BlindDown」「SlideDown」でイメージが引き出されて現れ、「BlindUp」「SlideUp」でしまわれます。いずれも、第1引数には効果を与えるタグのIDを、第2引数にはオプション設定を連想配列として指定します。このあたりは、これまでのメソッドとまったく同じです。利用できる主なオプションとしては、次のようなものがあります。

利用できる主なオプション

オプション名	説明
scaleX	横方向に拡大するかどうかを真偽値で指定。
scaleY	縦方向に拡大するかどうかを真偽値で指定。
scaleFromCenter	中央から拡大するように表示するかどうかを真偽値で指定。
scaleFrom	開始時のサイズを0～100（％）で指定。
scaleTo	終了時のサイズを0～100（％）で指定。
duration	エフェクトにかかる時間を秒数で指定。

　これらの視覚効果は、それまでのものとは大きく異なる点が1つあります。それは、「<img>タグだけでは動かない」という点です。GrowやAppearは指定したタグの大きさや透明度を操作しますが、このBlindDownやSlideDownは、指定したタグの縦幅を調整することで、その中に組み込まれているものの表示が変化する、というものです。従って、<img>に効果を与えたい場合、<img>を第1引数に指定してもまったく効果はありません。<img>を<div>などのタグの中に入れ、その<div>タグを第1引数に指定する、というようにしてください。

その他の消える効果

　特定の要素を消す視覚効果には、その他にもいろいろとあります。ここでは「Puff」と「DropOut」をあげておきましょう。

Puffによる消去

<a href="#" onclick="Effect.Puff('img1',{from: 0, to: 1,duration: 3}); return false;">Hide Image!</a>
<br />
<img id="img1" style="width:100px; height:100px;" src="./img/image1.jpg" />

クリックするとイメージが拡大しながら消えていく。

DropOutによる消去

<a href="#" onclick="Effect.DropOut('img1',{duration: 3}); return false;">Hide Image!</a>
<br />
<img id="img1" style="width:100px; height:100px;" src="./img/image1.jpg" />

クリックするとイメージが下に落ちながら消えていく。

　Puffは、要素が拡大しながら薄くなり消えていきます。DropOutは、文字通りその要素がページの下にすとんと落ちるようにして消えていきます。いずれも、duration、from、toといったオプションが用意されています。durationは効果にかかる秒数、fromとtoはそれぞれ開始時と終了時の効果の進み具合を0～1の実数で指定します。これらを指定することで、例えば「次第に現れる」という効果も作れます（ただし、効果が終わったところで消えてしまうので、あまり意味はありませんが……）。