Ajaxエフェクト

このページはAjax関連ライブラリ等で利用できるエフェクトに関しての用例を掲載しています。これらのエフェクトは非同期通信を行わなくても利用できるため、通常のサイトでも効果的に利用できます。Ajax一般に関してはAjax勉強用サンプル&解説を参照してください。
ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。
Last update:2006/10/12 PM 3:49
■ライブラリを使用しないタイプ
  1. 不透明度の処理
  2. 枠のズームアニメーション


■Rico
  1. Rico.jsを使った不透明度処理(フェードイン/フェードアウト)
  2. Rico.jsを使った移動処理
  3. Rico.jsを使ったサイズ変更処理
  4. Rico.jsを使ってサイズと移動処理を同時に行う
  5. Rico.jsを使って角丸四角形にする
  6. Rico.jsを使ったドラッグドロップ処理
  7. Rico.jsで移動処理後に関数を呼び出す


■Script.aculo.us
  1. scriptaculous.js:effects.js フェードイン/フェードアウト(Fade)
  2. scriptaculous.js:effects.js フェードイン(Appear)
  3. scriptaculous.js:effects.js 拡大しながら透明にする(Puff)
  4. scriptaculous.js:effects.js 上から内容を表示(BlindDown)
  5. scriptaculous.js:effects.js 下から上に向かって消す(BlindUp)
  6. scriptaculous.js:effects.js スイッチオフ効果(SwitchOff)
  7. scriptaculous.js:effects.js 上から下にスライドしながら表示する(SlideDown)
  8. scriptaculous.js:effects.js 下から上にスライドしながら消す(SlideUp)
  9. scriptaculous.js:effects.js 落下しながら消滅(DropOut)
  10. scriptaculous.js:effects.js 左右に揺らす(Shake)
  11. scriptaculous.js:effects.js 点滅させる(Pulsate)
  12. scriptaculous.js:effects.js 縮小し消す(Squish)
  13. scriptaculous.js:effects.js 縦、横に縮小し消す(Fold)
  14. scriptaculous.js:effects.js 拡大しながら登場させる(Grow)
  15. scriptaculous.js:effects.js 中央に縮小させ消す(Shrink)
  16. scriptaculous.js:effects.js ハイライト表示(Highlight)
  17. scriptaculous.js:effects.js 不透明度設定(Opacity)
  18. scriptaculous.js:effects.js サイズ設定(Scale)
  19. scriptaculous.js:effects.js 指定位置に移動(MoveBy)
  20. scriptaculous.js:effects.js 並行してエフェクトを処理(Parallel)
  21. scriptaculous.js:effects.js 指定エレメントまで移動(ScrollTo)


■bytefx
  1. bytefx:不透明度処理
  2. bytefx:カラー変更処理
  3. bytefx:フェード処理
  4. bytefx:ドラッグ処理
  5. bytefx:移動処理
  6. bytefx:位置を指定する
  7. bytefx:リサイズ処理
  8. bytefx:停止処理
  9. bytefx:カラー文字列/カラーコード変換
  10. bytefx:イベント設定
  11. bytefx:位置を取得する
  12. bytefx:サイズを取得/変更する


■Animation.Raster
  1. シンプルな画像のラスタースクロール