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

• Newer
• Older

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

• 2008-08-21 (木)
• 技術
• 

更新履歴

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

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

続きからご覧ください。

サンプルで遊んでみる

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

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

対応ブラウザ

• Mac
• Firefox3.0
• Safari3.1
• Opera9.5

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

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

基本的な使い方

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

jQuery.jDropper({ easingRandom : true, animation: "rain", // or repeat game: false, duration: 2500, width : 30, height : 151, images : [ "hoge/hoge.png" ] });

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

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

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

jQuery.jDropper({ easingRandom : true, animation: "rain", // or repeat game: false, duration: 2500, width : 30, height : 151, images : [ "http://lab.hisasann.com/jdropper/img/shita.png", "http://lab.hisasann.com/jdropper/img/shita2.png", "http://lab.hisasann.com/jdropper/img/shita3.png", "http://lab.hisasann.com/jdropper/img/shita4.png", "http://lab.hisasann.com/jdropper/img/shita5.png", "http://lab.hisasann.com/jdropper/img/shita6.png", "http://lab.hisasann.com/jdropper/img/shita7.png", "http://lab.hisasann.com/jdropper/img/shita8.png", "http://lab.hisasann.com/jdropper/img/shita9.png", "http://lab.hisasann.com/jdropper/img/shita20.png", "http://lab.hisasann.com/jdropper/img/shita21.png", "http://lab.hisasann.com/jdropper/img/shita22.png" ] });

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

jQuery.jDropper({ easingRandom : true, animation: "repeat", // or rain game: false, duration: 2500, width : 30, height : 151, images : [ "http://lab.hisasann.com/jdropper/img/shita.png", "http://lab.hisasann.com/jdropper/img/shita2.png", "http://lab.hisasann.com/jdropper/img/shita3.png", "http://lab.hisasann.com/jdropper/img/shita4.png", "http://lab.hisasann.com/jdropper/img/shita5.png", "http://lab.hisasann.com/jdropper/img/shita6.png", "http://lab.hisasann.com/jdropper/img/shita7.png", "http://lab.hisasann.com/jdropper/img/shita8.png", "http://lab.hisasann.com/jdropper/img/shita9.png", "http://lab.hisasann.com/jdropper/img/shita20.png", "http://lab.hisasann.com/jdropper/img/shita21.png", "http://lab.hisasann.com/jdropper/img/shita22.png" ] });

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

jQuery.jDropper({ easingRandom : true, animation: "repeat", // or rain game: false, duration: 1000, width : 30, height : 151, images : [ "http://lab.hisasann.com/jdropper/img/shita.png", "http://lab.hisasann.com/jdropper/img/shita2.png", "http://lab.hisasann.com/jdropper/img/shita3.png", "http://lab.hisasann.com/jdropper/img/shita4.png", "http://lab.hisasann.com/jdropper/img/shita5.png", "http://lab.hisasann.com/jdropper/img/shita6.png", "http://lab.hisasann.com/jdropper/img/shita7.png", "http://lab.hisasann.com/jdropper/img/shita8.png", "http://lab.hisasann.com/jdropper/img/shita9.png", "http://lab.hisasann.com/jdropper/img/shita20.png", "http://lab.hisasann.com/jdropper/img/shita21.png", "http://lab.hisasann.com/jdropper/img/shita22.png" ] });

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

jQuery.jDropper({ easingRandom : true, animation: "rain", // or rain game: true, duration: 2500, width : 30, height : 151, images : [ "http://lab.hisasann.com/jdropper/img/shita.png", "http://lab.hisasann.com/jdropper/img/shita2.png", "http://lab.hisasann.com/jdropper/img/shita3.png", "http://lab.hisasann.com/jdropper/img/shita4.png", "http://lab.hisasann.com/jdropper/img/shita5.png", "http://lab.hisasann.com/jdropper/img/shita6.png", "http://lab.hisasann.com/jdropper/img/shita7.png", "http://lab.hisasann.com/jdropper/img/shita8.png", "http://lab.hisasann.com/jdropper/img/shita9.png", "http://lab.hisasann.com/jdropper/img/shita20.png", "http://lab.hisasann.com/jdropper/img/shita21.png", "http://lab.hisasann.com/jdropper/img/shita22.png" ] });

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

jQuery.jDropper({ easingRandom : true, animation: "rain", // or repeat game: false, duration: 2500, width : 13, height : 80 });

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

jQuery.jDropper({ easingRandom : true, animation: "repeat", // or rain game: false, duration: 2500, width : 13, height : 80 });

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

jQuery.jDropper({ easingRandom : true, animation: "repeat", // or rain game: false, duration: 1000, width : 170, height : 320, images : [ "http://lab.hisasann.com/jdropper/img/shita11.png", "http://lab.hisasann.com/jdropper/img/shita12.png", "http://lab.hisasann.com/jdropper/img/shita13.png", "http://lab.hisasann.com/jdropper/img/shita14.png" ] });

ちょっとしたアドバイス

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

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

まとめ

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

• Newer: Safariでは画像のloadが終わっていないとwidth、heightがうまく取得できない
• Older: 今日の作業場

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Name

Mail address

URI

Remember personal info

Yes No

Comment スタイル指定用の一部の HTMLタグが使用できます

Add Your Comment

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, JavaScripter Blog

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

RSS Feeds

Search

HouseTect, JavaScripter Blog内の検索

Recent Entries

• Movabl Typeを3.3から4.2にアップデートした
• SafariのWebインスペクタはFirebugっぽくウィンドウに統合できる
• 買ったもの
• Google Wave Developer Preview at Google
• RhinoでJavascriptの継続を使ってみる
• 画像をめくるjQuery Plugin - jStack作りました
• Macに発音させるsayコマンドでDaftPunkは厳しい
• ActionScript3 - HelloWorld
• PerlのMVCフレームワークCatalystをインストールしてみた
• 最もシンプルにJavaのAOPを書いてみる→そしてJavaScriptへ

このブログについて

author：hisasann.com

description：フリーランスで仕事しているプログラマーです。
最近はJavaScript、Perl、Rails、Java（Struts+Spring+iBatis）なんかをいろいろといじっています。
今猛勉強中なのがActionScriptです。
アニメーション楽しい！

それにしても不景気ですね〜、とはいっても飲みに行きませんか？

日々の日記 :

• Hisasann’s Log@はてダ

他に運営しているブログ：

• DigitalGrounder.COM
• NoTechnoNoLife

利用しているWebサービス :

• hisasann@はてブ
• hisasann@Twitter
• hisasann@Mixi
• hisasann@Flickr

Tag cloud

ActionScript addon Ads Ajax Amazing Anime Application Aptana baby Blog Bloger BlogParts Book Book Review Bookmark Bookmarklet Box2d browser Camera Canvas Catalyst Chrome CM Communication Cool CSS CSS3 DB design Dinner DJ DOM DS Eclipse Editor Electro Emulator Engineer English Firebug Firefox Flash Flex Flickr Food Freesoft Funny Gadget Game Geek Generator Google Google Wave Hacker hatena HTML iBatis IDE IE Image Interface iPhone iPod IT Item iTunes Java JavaScript jQuery JsUnit Keyboard Lanch Language LifeHack Mac MacBookPro Mash-up Mobile Monitor MOO Motivation Movalble Type Movie Music MySql Netscape News Nikki OpenSource Opera Oracle Papervision3D Pasta PC Perl Photoshop PHP PL/SQL Plugin Presentation Program prototypeJS QUnit Ramen Rhino RSS Ruby Ruby On Rails Safari Sanitizing Search Seasar2 Security SEO Shell Shortcut Skill SMO SNS Spring SQL Struts Test TextMate Tomcat Tool Twitter Unix Vista Web Web2.0 WebService Wii Wiki Windows Word WordPress Work Workshop WTP XSS XUL Yahoo YouTube

カテゴリー

• Firefox
• Lifehack
• Mac
• News
• Photoshop
• Web
• アイテム
• ガジェット
• ゲーム
• サービス
• デザイン
• ブログ
• 技術
• 映像
• 本
• 画像
• 考え方
• 言葉
• 雑記

月別アーカイブ

月を選択 2009年6月 2009年5月 2009年4月 2009年3月 2009年2月 2009年1月 2008年12月 2008年11月 2008年10月 2008年9月 2008年8月 2008年7月 2008年6月 2008年5月 2008年4月 2008年3月 2008年2月 2008年1月 2007年12月 2007年11月 2007年10月 2007年9月 2007年8月 2007年7月 2007年6月 2007年5月

Powered by

Powered by
Movable Type Commercial 4.261