Home > 技術 > なんかものが落ちるjQuery Plugin - JDropper作りました

なんかものが落ちるjQuery Plugin - JDropper作りました

更新履歴

2008/08/21
- easingの種類を増やしました
- id:pyangoroさんの指摘で名前を変更しましたw
- id:ぁゃιくない(*~Д~)さんのさんまの名探偵的なゲームだと面白いという意見によりちょいゲーム化
- duration(速度)をパラメータとして渡せるようにしました

jdropper

画像やHTML要素が雨のように降り注いだら面白いな〜と思ってこのjDropperを制作しました。
特にこれを使って何かが出来るわけではないですが、ブログパーツの一種として使っていただけたら幸いです。

続きからご覧ください。



サンプルで遊んでみる

まずは以下のボタンで動作を確認してみてください。

jDropter

このサンプルではドロップシャドウ付きの画像を降らしています。
なので自分のブログの全面で画像がまるで雨のように降り注いでいるように見えますね。

対応ブラウザ

  • Mac
    • Firefox3.0
    • Safari3.1
    • Opera9.5
  • Windows
    • IE6.0
    • IE7.0
    • Firefox3.0
    • Safari3.1
    • Opera9.5

今回は画像に透過PNGを使っているのでIE6.0では透けない画像になってしまいます。
ご了承ください。

基本的な使い方

jDropperの使い方はいたって簡単です。
以下のようにjDropperコンストラクタを呼び出すだけです。

jDropperの制御は引数の連想配列(ハッシュ)にて行います。
以下連想配列で使えるID一覧です。

jDropperコンストラクタに渡す引数の説明

easingRandom
オブジェクト動作時のアニメーションをランダムにするかそうでないかのboolean値です。また直接easingの種類も渡すことができます。たとえばeaseOutBounceというeasingを渡したい場合は文字列としてセットしてください
animation
アニメーションのタイプを設定します。rainは雨のように降り注ぎ、repeatは上から下へ、また下から上へと動作するパラメータになります
game
落ちてくるオブジェクトを避けるミニゲームです
duration
アニメーションの速度を指定できます
width
オブジェクトの幅を指定します
height
オブジェクトの高さを指定します
images
画像を降らせたい場合はここに配列でセットします。画像の選択はランダムになります

widthやheightは降り注ぐオブジェクトを一定にするために使用しています。
降ってくるオブジェクトのサイズがバラバラだと見栄えば悪いのでこのようにしています。
imagesは渡さなくても問題ありません。そのときはランダムに選び出された色を指定したdivタグを自動的に使用します。

jDropperに必要なライブラリ+プラグイン

jDropperはjQueryを使っています。
ですので、動作を確認する場合や実装する場合には以下からjQuery本体をダウンロードしてください。
jQuery: The Write Less, Do More, JavaScript Library

またアニメーションにはjQuery Pluginのeasingを使っております。合わせたダウンロードをお願いいたします。
jQuery Easing Plugin

てっとり速く使ってみたい方は、すべてをまとめた圧縮ファイルをご用意していますのでそちらのダウンロードをお願いいたします。
圧縮ファイルのダウンロードは以下からどうぞ。
jdropper.zip

jDropper.jsはだけは以下からどうぞ。
jDropper.js

いろいろなパターンで遊んでみる

先ほども紹介しましたが、画像が雨のように降るパターン

jDropter


画像が上から下へ、下から上へ動作するパターン

jDropter


速度をかなり速めにしたパターン

jDropter


さんまの名探偵ミニゲームパターンw
ひたすら避けてください。

jDropter


画像の指定なしで色付きのオブジェクトが雨のように降るパターン

jDropter


画像の指定なしで色付きのオブジェクトが上から下へ、下から上へ動作するパターン

jDropter


すんごくぶっとい画像のパターン

jDropter

ちょっとしたアドバイス

widthをもっと細くするとかなり実際の雨のようにできますが、あまりに細いと重くなってしまうので注意が必要です。
丁度よい細さ、または重くならない細さはだいたい15pxから30pxです。

今回画像を渡せるようになっていますので、ここにいろんな画像を指定してみるのも面白いかもしれません。
たとえばボクの大好きな唇画像を何個か渡してみた場合は以下のボタンです。

jDropter

まとめ

とりあえずなversion0.1なのでこれからアニメーションの速さを指定したり、左右にもスライドさせたり機能を追加させていきたいです。
それと別にjQueryのプラグインじゃなくてもよかったかなw

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1099
Listed below are links to weblogs that reference
なんかものが落ちるjQuery Plugin - JDropper作りました from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > なんかものが落ちるjQuery Plugin - JDropper作りました

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top