jQueryで画像を破壊するエフェクトを作る方法

0

20110126-07

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

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

デモ

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

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

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

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

MooToolsで作られた軽量の入力チェックスクリプト「FormCheck」

0

FormCheck」はMooTools用のスクリプトでフォームの入力チェックをする事が可能になっています。

20100619-06

iPhoneでマウスジェスチャーができるようになるMooToolsライブラリ「Moousture」

0

Moousture」はサイトにマウスジェスチャー機能を追加できるMooToolsのライブラリです。

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

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

20100530-02

任意のオブジェクトをドラッグできるMooToolsプラグイン「towel.js」

0

towel.js」はドラッグ&ドロップで任意のオブジェクトを操作できるようになるプラグインです。
オブジェクトはページ内のどこにでもドラッグする事ができます。

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

20100527-01
デモ

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

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

mootoolsを使用してスライドショーにブラインド効果をつけるプラグイン「Floom」

0

20100305-15
Floom」というMooTools 1.2を使用してスライドショーを作成する事ができるプラグインをご紹介します。
画像切り替えの際にブラインド効果をつける事で、一味違うスライドショーを作る事ができます。

詳しくは以下

テキストをその場で編集できるJavaScript10選

0

20100218-12
テキストをその場で編集するためのjQueryプラグインをまとめた10 interesting inline editor plugins you might be searching forというエントリーのご紹介。

詳しくは以下

JavaScriptのフレームワークを試せるオンラインエディタ「jsFiddle」

0

jsFiddle
jsFiddleはJavaScriptのフレームワークの動作を確認できるオンラインエディタです。

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

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

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

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

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

スライドショーを作成するMooToolsのプラグイン「blackbox」

0

blackbox
blackboxはスライドショーを作成する事ができるmootoolsのプラグインです。

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

詳しくは以下

MooToolsでバブルチャートを表示するプラグイン「moochart」

0

moochart
MooToolsを使用してバブルチャートが作成できるライブラリmoochart というものを見つけたのでご紹介。

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

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

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

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