Ajaxエフェクト
このページはAjax関連ライブラリ等で利用できるエフェクトに関しての用例を掲載しています。これらのエフェクトは非同期通信を行わなくても利用できるため、通常のサイトでも効果的に利用できます。Ajax一般に関しては
Ajax勉強用サンプル&解説
を参照してください。
ミスや間違いなどがありましたら
[email protected]
までお願いします。
Last update:2006/10/12 PM 3:49
■ライブラリを使用しないタイプ
不透明度の処理
枠のズームアニメーション
■Rico
Rico.jsを使った不透明度処理(フェードイン/フェードアウト)
Rico.jsを使った移動処理
Rico.jsを使ったサイズ変更処理
Rico.jsを使ってサイズと移動処理を同時に行う
Rico.jsを使って角丸四角形にする
Rico.jsを使ったドラッグドロップ処理
Rico.jsで移動処理後に関数を呼び出す
■Script.aculo.us
scriptaculous.js:effects.js フェードイン/フェードアウト(Fade)
scriptaculous.js:effects.js フェードイン(Appear)
scriptaculous.js:effects.js 拡大しながら透明にする(Puff)
scriptaculous.js:effects.js 上から内容を表示(BlindDown)
scriptaculous.js:effects.js 下から上に向かって消す(BlindUp)
scriptaculous.js:effects.js スイッチオフ効果(SwitchOff)
scriptaculous.js:effects.js 上から下にスライドしながら表示する(SlideDown)
scriptaculous.js:effects.js 下から上にスライドしながら消す(SlideUp)
scriptaculous.js:effects.js 落下しながら消滅(DropOut)
scriptaculous.js:effects.js 左右に揺らす(Shake)
scriptaculous.js:effects.js 点滅させる(Pulsate)
scriptaculous.js:effects.js 縮小し消す(Squish)
scriptaculous.js:effects.js 縦、横に縮小し消す(Fold)
scriptaculous.js:effects.js 拡大しながら登場させる(Grow)
scriptaculous.js:effects.js 中央に縮小させ消す(Shrink)
scriptaculous.js:effects.js ハイライト表示(Highlight)
scriptaculous.js:effects.js 不透明度設定(Opacity)
scriptaculous.js:effects.js サイズ設定(Scale)
scriptaculous.js:effects.js 指定位置に移動(MoveBy)
scriptaculous.js:effects.js 並行してエフェクトを処理(Parallel)
scriptaculous.js:effects.js 指定エレメントまで移動(ScrollTo)
■bytefx
bytefx:不透明度処理
bytefx:カラー変更処理
bytefx:フェード処理
bytefx:ドラッグ処理
bytefx:移動処理
bytefx:位置を指定する
bytefx:リサイズ処理
bytefx:停止処理
bytefx:カラー文字列/カラーコード変換
bytefx:イベント設定
bytefx:位置を取得する
bytefx:サイズを取得/変更する
■Animation.Raster
シンプルな画像のラスタースクロール