複合的な動きによる演出効果

前回は基本的な演出効果を実現する方法を紹介した。今回はそれらを組み合わせて複合的な動きをする演出効果を紹介したい。Script.aculo.usのバージョンは引き続き1.8である。詳細はWikiページで確認していただきたい。

なお、オプション以外で省略可能な記述は[～]で表す。オプションはすべて省略可能だ。また、画面上での動作を示すために、要素の元の大きさを点線で示す別の要素を重ねて表示させている(画像はInternet Explorer 7で実行したもの)。

表示済みの要素に動きを与える

Effect.Shake( IDもしくはDOMオブジェクト, { オプション } );
または
$( IDもしくはDOMオブジェクト ).shake( { オプション } );

左右に揺れる。durationとdistanceを短く設定すれば、ブルブルと震えてあたかも首を「イヤイヤ」と横に振っているかのような動作になり、長くすればゆっくり揺れるような動作になる。

[主なオプション]

名称	値の内容	デフォルト
pulses	明滅の回数	5
from	最も低い透明度	0
to	最も高いい透明度	1
duration	動作完了までの時間	2.0
transition	明滅の方法	Effect.Transitions.sinoidal
(*)Effect.Transitionsにはlinear/sinoidal/reverse/flicker/wobble/pulse/spring/none/fullがある

【例】id="demo"の要素を明滅させる

$( 'demo' ).puslate();
Effect.Puslate( 'demo', { pulses : 3, transition : Effect.Transitions.linear } );</strong>

要素を表示させる

Effect.Grow( IDもしくはDOMオブジェクト, { オプション } );
または
$( IDもしくはDOMオブジェクト ).grow( { オプション } );

display : noneの要素を少しずつ拡大させながら表示する。要素内のテキストも設定した大きさまで拡大する。

[主なオプション]

名称	値の内容	デフォルト
direction	拡大の基点	'center'
moveTransition	要素の移動方法	Effect.Transitions.sinoidal
scaleTransition	拡大の方法	Effect.Transitions.sinoidal
opacityTransition	透明度を変化させる方法	Effect.Transitions.full
(*)directionには'top-left'/'top-right'/'bottom-left'/'bottom-right'/'center'を指定可能

【例】id="demo"の要素を拡大させながら表示する(要素はdisplay : noneを設定済み)

$( 'demo' ).grow( { direction : 'top-left' } );
new Effect.Grow( 'demo', { scaleTransition : Effect.Transitions.linear, opacityTransition : Effect.Transitions.flicker } );

要素の表示/非表示

Effect.Appear( IDもしくはDOMオブジェクト, { オプション } );
Effect.Fade( IDもしくはDOMオブジェクト, { オプション } );
または
$( IDもしくはDOMオブジェクト ).appear( { オプション } );
$( IDもしくはDOMオブジェクト ).fade( { オプション } );

Appearはフェードインで要素を表示し、Fadeはフェードアウトで要素を非表示にする。 変化させる透明度の範囲はオプションのfrom/toで設定できる。Appearのデフォルトは{ from : 0.0, to : 1.0 }で、Fadeのデフォルトは{ from : 1.0, to : 0.0 }だ。

透明度が1.0の要素に対してAppearは実行されない。そして既に非表示(display : none)の要素に対してFadeは実行されない。また、Fadeによって透明度が0.0になると要素は非表示となる。

【例】id="demo"の要素をフェードイン/フェードアウト

$( 'demo' ).appear();    // フェードイン
$( 'demo' ).fade();      // フェードアウト

【例】id="demo"の要素を透明度0.2から0.7の範囲でフェードイン/フェードアウト

new Effect.Appear( 'demo', { from : 0.2, to : 0.7 } );  // フェードイン
new Effect.Fade( 'demo', { from : 0.7, to : 0.2 } );    // フェードアウト

---

Effect.BlindDown( IDもしくはDOMオブジェクト, { オプション } );
Effect.BlindUp( IDもしくはDOMオブジェクト, { オプション } );

BlindDownは非表示の状態から上から下に引き伸ばして要素を表示する。BlindUpは下から上に縮むようにして要素を非表示にする。動作中はoverflow : hiddenが設定されるので、内部の要素がはみ出して表示されることはない。

なお、似た動作をするものにSlideDown/SlideUpがあるが、筆者の環境ではエラーが発生して動作させることができなかった。

[主なオプション ]
Wikiページ参照

【例】id="demo"の要素を3秒間かけてスライドして表示/非表示

Effect.BlindDown( 'demo',  { duration : 3 } );   // 要素を表示
Effect.BlindUp( 'demo',  { duration : 3 } );     // 要素を非表示

---

Effect.toggle( IDもしくはDOMオブジェクト[, appear(デフォルト)|slide|blind [, { オプション }]] );

実行されるたびに、以下のいずれかの方法で要素の表示/非表示を切り替える

appear - Appear/Fade  (デフォルト)
slide  - SlideDown/SlideUp  (上記の理由で筆者の環境では動作を確認できず)
blind  - BlindDown/BlindUp

要素のさまざまな消え方

最後に、要素を非表示にする際の動きにいくつか種類があるので、それらを紹介しよう。

Effect.DropOut( 'demo' ); または $( 'demo' ).dropOut();

Effect.Fold( 'demo' ); または $( 'demo' ).fold();

Effect.Puff( 'demo' ); または $( 'demo' ).puff();

Effect.Shrink( 'demo' ); または $( 'demo' ).shrink();

Effect.Squish( 'demo' ); または $( 'demo' ).squish();

Effect.SwitchOff( 'demo' ); または $( 'demo' ).switchOff();

これらの動作はオプションの設定によって表示画面にさまざまな演出効果をもたらすことができる。ぜひWebページの表現にあった設定を見つけていただきたい。