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

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

使用方法
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」サンプル

sponsors

「要素に重力を与えられるJavaScript「AvriBubble」」をシェアする

記事作成:
記事URL:

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