Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings
This repository was archived by the owner on Dec 25, 2019. It is now read-only.

benahm/jquery.throwable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

122 Commits

Repository files navigation

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

About

JQuery plugin to make HTML elements throwable

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

Languages

AltStyle によって変換されたページ (->オリジナル) /