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

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

sponsors

使用方法

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;}

サンプル

ころがってます。。。

sponsors

Javascriptサンプルページ一覧
skuare.net