🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

jQuery plugin to make html element throwable.Create physical-like html object in your browser.Demo :Check out this simple demo here Octocats DemoApplying gravity per selection of elements Gravity per elementAn other demo Slider demoDemo of collision detection and area detection hereBillard js Play Billard

Plugins

Documentation

JQuery.throwable

JQuery plugin to make HTML elements throwable

Create physical-like HTML objects in your browser

Code example

$(".box2d").throwable({                         containment:[0,0,500,500],                         drag:true,                         gravity:{x:0,y:0},                         impulse:{                             f:52,                             p:{x:1,y:1}                         },                         shape:"circle",                         autostart:false,                         bounce:0.5,                         damping:100,                         areaDetection:[[0,0,300,300]],                         collisionDetection: true                     });

Options

* gravity: object {x:valueX,y:valueY}  * container: define the limits where the object can be thrown                     "window" is the default                    "parent" the object will be contained inside the parent                    you can specify custom a container by giving array [x1,y1,x2,y2] * shape: defines the shape of the object, by default is "box" and you can specify "circle" * autostart: by default the effects start at mouse move  * drag: boolean to specify if the object will be draggable or not, by default it is set to true * impulse: you can specify an impluse to apply on the object by giving an object                     {                         f: forceValue, // define the energy of the impluse (number)                         p: pointDirection //define the direction on the impluse object like the gravity option                    } * bounce: defines the bounce effect of the body (value between 0 and 1) default 0, no bounce * damping: defines the damping(*) effect value from 0 to infini, default 0  * areaDetection: specify an array of areas, that when an objet enter those areas the event inarea is fired                   and outarea event fired when exiting * collisionDectection : bool to activate or desactivate the collision detection 

(*) : damping

Events & Callbacks

* inarea : fired when an object enter and area specified in the option areaDetection * outarea : fired when an object exit and area specified in the option areaDetection * collision : fired when a collision happened between two objects  * nocollision : fired when there is no collision 

Requirements

* JQuery (of course it's a jquery plugin) 

Demos

Credits

How to use it!

You can test it by including this js link to your page

<script src="http://benahm.github.io/jquery.throwable/javascripts/jquery.throwable.js" type="text/javascript"></script> 

Or download the js file


You May Also Like