Create an Exploding Logo with CSS3 and MooTools or jQueryというエントリーより、
画像にマウスオーバーした際に、バラバラと壊すエフェクトをjQueryで作る方法をご紹介。

どのような動きをするのかは、実際のデモを見て頂くのが一番だと思います。

デモ

眼鏡をかけた男性の画像が、あらら・・・な感じになってしまいます。
遊び心があって良いですね。

ブーメランのようにもとに戻る動きも面白いです。

実装にはjQueryかmootoolsを選択できるようになっています。
アニメーション部分にはCSS3を使っているようですね。

ひと工夫させたいサイトにぜひ。

デモ

以下のような機能があるようです。

• エラーメッセージの表示位置の指定
• 基本的な入力チェック（英数字、数字、アルファベット、文字列の長さ）
• 正規表現によるチェック
• カスタムした入力チェック

サイトのちょっとした入力チェックにいかがでしょうか。

マウスポインタの動きやジェスチャの値を受け取った後の動きを自由につける事が可能になっています。

「左、右、左に動かすとHome画面を表示する」など様々な使い方が考えられますね。

サイトにはiPhone用のデモページも用意されていました。
もし、iPhoneをお持ちの方はご覧になってみてください。

デモ

モバイルデバイスではタッチ操作が今や当たり前になりつつあります。
使い方によってはかなりインパクトを与える事ができるのではないでしょうか。

ドロップの際に勢いをつけると勢い良くスクロールしていきます。

デモ

以下のようなコードで簡単に実装できるようですね。

$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用サイトを構築する際に、タッチ操作でネイティブアプリに近いものを作りたい方。いかがでしょうか。

詳しくは以下

使い方

まずはgithubからプラグインをダウンロードしてきます。

プラグインを有効にします。

$('blinds').floom($$('#blinds img'), {
  axis: 'vertical'
}); 

htmlに以下のように記述します。

<div id="blinds">
  <img title="Description 0" alt="" src="nature-photo0.jpg" />
  <img title="Description 1" alt="" src="nature-photo1.jpg" />
  <img title="Description 2" alt="" src="nature-photo2.jpg" />
  <img title="Description 3" alt="" src="nature-photo3.jpg" />
  <img title="Description 4" alt="" src="nature-photo4.jpg" />
</div>

これで設定は完了です。簡単ですね！

オプションの設定

以下のオプションが設定できるようです。

prefix

CSSで指定するclass名のプレフィックスを指定できます。複数テーマを使用する場合などに

amount

ブラインドの量。初期値は24

animation

アニメーションにかける時間。初期値は70

interval

次のスライドへ遷移するまでの時間。初期値は8000 (ミリ秒)

axis

ブラインドの向き。縦横を切り替えます。「horizontal」か「vertical」を指定。初期値はvertical

progressbar

プログレスバーを表示するかどうか。trueで表示、falseで非表示になります。初期値はtrue

captions

キャプション表示を切り替えます。初期値はtrue

slidesBase

スライドさせる画像のディレクトリを指定できます。

他にも画像変更時のイベントなどを受け取って拡張できるようになっているようです。

オプションはプラグインの呼び出し時に指定します。

			$('blinds').floom($$('#blinds img'), {
				slidesBase: 'slides/',
				sliceFxIn: {
					top: 20
				}
			});

興味のある方はぜひダウンロードしてみてください。

詳しくは以下

1. Akeditable

編集リンクをクリックでテキストエリア表示。 jQueryのプラグインとして動作します。

公式サイト

デモ

2. Josephscott Jeip

編集できるテキストはマウスオーバーで背景色がかわります。

デモ

3. Davehauenstein

プルダウンや１行テキストなど、フォームの内容を選択することが可能です。

デモ

4. 15daysofjquery

英語ですが、詳しい設定方法が記載されています。

公式サイト

5. Jeditable

ダブルクリックやマウスオーバーなどのイベントを取得してフォーム表示などができます。
Ajaxによるファイルアップロードにも対応しているようです。

公式サイト

6. Yvoschaap

デモ

7. Inplace Rich Editor

テキストエリアにWISYWIGを使用しています。

デモ

8. Tool man

リストをドラッグ&ドロップで編集可能。

デモ

9. Justinmaier

mootoolsのプラグイン。ブラウザによっては変更領域がわかりずらかったです。

デモ

10. 24ways

ダウンロードはできないですが、テキスト変更の作り方のチュートリアル。

公式サイト

実際のデータの保存にはサーバーサイドのシステムが必要ですが、フロントエンドの開発に役立ちそうですね。

エディタは４つのブロックに分かれています。

• HTMLエディタ
• CSSエディタ
• JavaScriptエディタ
• 出力

使用するフレームワークとバージョンを選択し、「RUN」ボタンを押すだけで簡単に実行させることができます。
フレームワークにはMooTools、jQuery、Dojo、Prototype、YUI、Glow、Vanilla、processingが使用できました。

作成した内容には独自のURLが割り振られるため、後から共有することも可能になっています。

さくっと色々試せるので、フレームワークの比較とかには良いかもしれません。

画像のリストを指定すると順不同で表示するようです。
画像はクロスフェードしながら切り替わって行くので、商用サイトのTOPページなどに組み込めるのでは無いでしょうか。

詳しくは以下

設置方法

設置方法ですが、まずjavascriptを読み込みます.

次にスライドショーに変換したい画像をリストで指定します。

最後に自動再生する際の設定を行います。
先程のリストで指定したdivのid要素を第1引数に指定するようです。

<script>
var mySlideshow = new Blackbox('myBlackcubeSlideShow', { wait: 3000, height: 350 });
</script>

これで再生できるようです。
利用にはmootoolsの1.2が必要との事。

色やサイズ、線の色、tooltipの設定ができるようです。
サイトにデモがありますのでぜひ見てみてください。

• moochart – charts for mootools

各種ブラウザとAIRで動作保証されています。
以下のブラウザ環境で動くようですね。

• Adobe AIR 1.0+
• Safari 2+
• Firefox 2+
• Opera 9+
• Internet Explorer

ライセンスはMITライセンスとなっていますので、サイトにバブルチャートを検討されている方はいかがでしょうか。