
Create an Exploding Logo with CSS3 and MooTools or jQueryというエントリーより、
画像にマウスオーバーした際に、バラバラと壊すエフェクトをjQueryで作る方法をご紹介。
どのような動きをするのかは、実際のデモを見て頂くのが一番だと思います。
眼鏡をかけた男性の画像が、あらら・・・な感じになってしまいます。
遊び心があって良いですね。
ブーメランのようにもとに戻る動きも面白いです。
実装にはjQueryかmootoolsを選択できるようになっています。
アニメーション部分にはCSS3を使っているようですね。
ひと工夫させたいサイトにぜひ。
「FormCheck」はMooTools用のスクリプトでフォームの入力チェックをする事が可能になっています。

「Moousture」はサイトにマウスジェスチャー機能を追加できるMooToolsのライブラリです。
マウスポインタの動きやジェスチャの値を受け取った後の動きを自由につける事が可能になっています。
「左、右、左に動かすとHome画面を表示する」など様々な使い方が考えられますね。

「towel.js」はドラッグ&ドロップで任意のオブジェクトを操作できるようになるプラグインです。
オブジェクトはページ内のどこにでもドラッグする事ができます。
ドロップの際に勢いをつけると勢い良くスクロールしていきます。

以下のようなコードで簡単に実装できるようですね。
$ready().add(function() {
var dragable = $('example-skid-dragable');
var down = $towel(dragable).ui.down();
var follow = $towel(dragable).fx.follow();
var skid = $towel(dragable).phys.skid();
down.add(follow);
down.not().add(skid);
});
ユーザーに操作させるインターフェイスはこれからどんどん出てくると思います。
iPadやiPhone用サイトを構築する際に、タッチ操作でネイティブアプリに近いものを作りたい方。いかがでしょうか。

「Floom」というMooTools 1.2を使用してスライドショーを作成する事ができるプラグインをご紹介します。
画像切り替えの際にブラインド効果をつける事で、一味違うスライドショーを作る事ができます。
詳しくは以下
- 2010/02/16 Dojo , Glow , javascript , jquery , mootools , online IDE , processing , prototype , Vanilla , YUI , オンラインエディタ

jsFiddleはJavaScriptのフレームワークの動作を確認できるオンラインエディタです。
エディタは4つのブロックに分かれています。
- HTMLエディタ
- CSSエディタ
- JavaScriptエディタ
- 出力
使用するフレームワークとバージョンを選択し、「RUN」ボタンを押すだけで簡単に実行させることができます。
フレームワークにはMooTools、jQuery、Dojo、Prototype、YUI、Glow、Vanilla、processingが使用できました。
作成した内容には独自のURLが割り振られるため、後から共有することも可能になっています。
さくっと色々試せるので、フレームワークの比較とかには良いかもしれません。

blackboxはスライドショーを作成する事ができるmootoolsのプラグインです。
画像のリストを指定すると順不同で表示するようです。
画像はクロスフェードしながら切り替わって行くので、商用サイトのTOPページなどに組み込めるのでは無いでしょうか。
詳しくは以下

MooToolsを使用してバブルチャートが作成できるライブラリmoochart というものを見つけたのでご紹介。
色やサイズ、線の色、tooltipの設定ができるようです。
サイトにデモがありますのでぜひ見てみてください。
各種ブラウザとAIRで動作保証されています。
以下のブラウザ環境で動くようですね。
- Adobe AIR 1.0+
- Safari 2+
- Firefox 2+
- Opera 9+
- Internet Explorer
ライセンスはMITライセンスとなっていますので、サイトにバブルチャートを検討されている方はいかがでしょうか。
0