skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

要素に重力を与えられるJavaScript「AvriBubble」

｜ ｜ ｜ ｜ ｜ ｜ ｜

WEBは平面的ですが、そこに重力を加えられると表現の幅が広がりそうです。
AvriBubble : a very ligth 2D engine based on Mootoolsは要素に重力のようなものを与えられます。

使用方法
AvriBubble : a very ligth 2D engine based on MootoolsからavriBubble.js、mootoolsPlugin.jsをmootoolsからmootools.jsをダウンロードします。
<div id="colision"></div> //ここに表示されます。
<div id="id名" class="bubble" style="background: url(画像パス); top: 75px; left: 75px; width:41px; height: 41px"></div>
<script src="mootools-1.2.1.js" type="text/javascript"></script>
<script src="mootoolsPlugin.js" type="text/javascript"></script>
<script src="avriBubble.js" type="text/javascript"></script>
<script type="text/javascript">
container = new AvriContainer ({
gravity: 1, //重力なし（0）から10まで
randomChange: 0.99 //1だとスピード方向は変わりません。1以下だと動き続けます。
}) ;
container.add(new AvriBubbule ('id名', {
mass: 200,
isDraggable: false, //ドラッグできるどうか
step: 1　//初期スピード
}));
container.start();
</script>

※scriptは最後に書きます。
さらにCSSで以下のように記述します。
.bubble {position: absolute;cursor: move;}
.container {position: relative;z-index:-100;}

要素に重力を与えられるJavaScript「AvriBubble」サンプル

記事作成：2009年05月02日

前の記事：簡単にバーコードを作れるJavaScript「jquery-barcode」
次の記事：マウスオーバーで画像を拡大させるJavaScript「MagicalHover」