アクセントを与える効果
何かちょっとした「目を引く効果」というものもあります。左右にぶるぶると震えたり、ハイライトしたりといったもので、それぞれ「Shake」「Hightlight」として用意されています。これも例を挙げておきましょう。
<a href="#" onclick="Effect.Shake('img1', {distance: 50, duration:1 }); return false;">Move Image!</a>
<br />
<img id="img1" style="width:100px; height:100px;" src="./img/image1.jpg" />
<a href="#" onclick="new Effect.Highlight('effect_span', { duration:1 }); return false;">
<span id="effect_span">This is Sample!</span>
</a>
Shakeは、実行すると横にぶるぶると数回震えるように動きます。distanceで振れ幅を、durationで経過秒数をそれぞれ指定します。これは比較的簡単です。Highlightは、実行するとぱっと一瞬色が変わり、次第に元に戻っていきます。これもdurationで経過秒数を指定できます。
これらは、表示にちょっとしたインパクトを与える効果があります。ただし、Highlightについては背景色を利用しているため、<img>タグなどに効果を与えることはできません。
モーフィングを行う
スタイルシートの属性を滑らかに変化させることにより、ある状態から別の状態にゆっくりと変化させる（モーフィング）ものとして「Morph」が用意されています。これにより、要素の色（背景色や文字色）やフォントサイズ、位置、大きさといったスタイルを同時に変化させていくことができます。
<a href="#" onclick="new Effect.Morph('effect_span', {style: 'font-size: 12pt; Color: #FFFFFF; background: #0000FF; width:100px; height: 200px;', duration:3 }); return false;">
<div id="effect_span" style="font-size: 20pt; Color: #000000; background: #66FF66; width: 200px; height: 100px;">Sample</div>
</a>
これは、背景色、文字色、フォントサイズ、大きさ（縦横幅）を変化させていくサンプルです。Morphの第1引数にタグのID、第2引数にオプション設定を指定しますが、この第2引数の連想配列内に'style'として変化後のスタイルを指定しておきます。これだけで、実行すると滑らか何要素のスタイルが変化していきます。
スタイルシートを使っている関係上、<img>タグなどで表示色を変更させることはできません。また、<span>のようなインライン要素では大きさを変更することもできないでしょう。HTMLのタグによって、スタイルが使えるものと使えないものがあります。基本は、「ボックス要素のものに対して効果を与えるもの」と考えておくとよいでしょう。
複数の効果を同時に実行する
同時に複数の効果を表示するには、「Parallel」というものを利用します。これは、引数にあらかじめ用意しておいた効果の配列を同時に実行するものです。例えば、Opacity,Move,Scaleの3つの効果を同時に実行させる場合を考えてみましょう。
<a href="#" onclick="new Effect.Parallel([
new Effect.Opacity('img1',{from: 1.0, to: 0}),
new Effect.Move($('img1'),{x:300, y:0, mode:'relative'}),
new Effect.Scale($('img1'),300)],
{duration: 1, delay: 1}); return false;">Parallel Effect!</a>
<br />
<img id="img1" src="./img/image1.jpg" style="width: 100px; height: 100px;" />
このリンクをクリックすると、イメージが拡大しながら右に移動し、消えていきます。3つのエフェクトが同時に働いていることがよく分かります。このParallelは、次のような形で記述をします。
new Effect.Parallel( Effect配列 , オプション設定 );
第1引数に、効果オブジェクトを配列でまとめておきます。これにより、それらの効果が同時に実行されるようになります。また、効果を与える対象はParallelではなく各効果オブジェクトで指定されることから、1つの要素だけでなく複数の要素の同時に効果を与えることも可能です。
また、効果のオブジェクトを配列としてまとめることから分かるように、これは「newして利用するタイプ」のものしか扱えません。メソッドを直接呼び出す方式のものが含まれていると正しく機能しなくなりますので注意してください。
