スポンサードリンク

Spry framework for Ajax - SpryEffects

SpryEffectsとは

スタイルシートを駆使して色々な見せ方を最近はするようになってきましたが、SpryEffectsは代表的なエフェクトを簡単に扱えるようなライブラリです。

YUI Animationと本質は変わりませんが、Spry.Effect.Shake などのように、あらかじめ使いそうなEffectが用意されている点で便利な場合もあるかもしれません。YUI Animationを使って書けなくもないがすでにあるのなら書きたくはない:-)

SpryEffectsを使う前準備

必要なのは１つのファイルです。もちろんインストールは済ませておく必要があります。

<script type="text/javascript" src="your install path/SpryEffects.js"></script>

Spry1.3 現在で使えるEffect

AppearFade

opacityを操作してフェードイン，フェードアウトを行います。

Spry.Effect.AppearFade('elementId',{
    duration: 1000, // 動作完了までの時間
    from: 100,      // はじめの不透明度
    to: 0,          // おわりの不透明度
    toggle: true    // 連続して実行すると逆の動きをする
};

デモ AppearFade

Blind

こつとしては、divの入れ子を作って内側にあるdivの方をBlindで操作すると下のようにブラインドっぽく見えます。

Spry.Effect.Blind('elementId', {
    duration: 1000,
    from: '100%',   // はじめの隠れ度
    to: '0%',       // おわりの隠れ度
    toggle: true
});

デモ Blind

IE6とfirefix2.0で動作が違うみたい。。。

Slide

こつとしては、divの入れ子を作って外にあるdivの方をSlideで操作すると下のように内側のdivが潰れるようにみえます。

Spry.Effect.Slide('elementId',{
    duration: 1000,
    from: '100px',  // スライドはじめる位置
    to: '0px',      // スライドのおわり位置
    toggle: true
});

デモ Slide

IE6とfirefix2.0で動作が違うみたい。。。

Squish

角に向かって縮小します

Spry.Effect.Squish('elementId');

デモ Squish

GrowShrink

中央に向かって縮小します

Spry.Effect.GrowShrink('elementId', {
    duration: 1000,
    from: '100%',   // 縮小はじめるサイズ
    to: '0%',       // 縮小のおわりサイズ
    toggle: true
});

デモ GrowShrink

Shake

Shakeします

Spry.Effect.Shake('elementId');

デモ Shake

Highlight

色の操作を行います

Spry.Effect.Highlight('elementId', {
    duration: 1500,
    from: '#cccccc',         // 色が変化するはじめの色
    to: '#000000',           // 色が変化するおわりの色
    restoreColor: '#cccccc', // 最終的な色
    toggle:true
};

デモ Highlight

Pulsate

AppearFadeが連続して起こる。まさに波打ちます。from, to の値がちゃんと効いているか疑問。to: 0にしているのだから最後は真っ白になるはずでは？

Spry.Effect.Pulsate('elementId', {
    duration: 1000,
    from: 100,      // はじめの不透明度
    to: 0,          // おわりの不透明度
    toggle:true
});

デモ Pulsate

Puff

デモのリンクをクリックしたあと、もう一度押せないのはz-indexの値を調整すればなおるのかな？

Spry.Effect.Puff('elementId');

デモ Puff

Fold

使い道がいまいちよくわからないです。

Spry.Effect.Fold('elementId');

デモ Fold

DropOut

ドロップアウトします。

Spry.Effect.DropOut('elementId');

デモ DropOut

メールアドレス:
コメント^*: