Transform DOM Elements Into Actual Physical Objects - box2d
| File Size: | 276 KB |
|---|---|
| Views Total: | 895 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
box2d is a simple jquery plugin that transforms DOM elements into actual physical objects. well, physical in a flat 2d-browser-world that is.
How to use it:
<!doctype html><!-- it's HTML5 time -->
<html>
<head><title>hello world box2d-jquery example</title>
</head>
<style>
/* it's a good idea to give block elements a width, otherwise they go all the way (to the width of theire parent)*/
h1 {background-color: lightgray; width: 500px;}
div {width: 500px; background-color: lightgray;}
</style>
<body>
<h1>Hello World Lorem Ipsum</h1>
<!-- it's a very good idea to give img an width and height, as physical 2d objects need them to make any sense -->
<img src="http://placekitten.com/400/300" width="400px" height="300px">
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat ...</div>
<!-- it's a jquery plugin, so make sure you include jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- include the production version of jquery.box2d.js -->
<script src="./js/lib/jquery.box2d.min.js"></script>
<!-- your script starts here -->
<script>
//wait until the DOM is ready, otherwise strange things might happen
$(document).ready(function() {
//select DOM nodes and make them fall down with a speed of 5px per step
$("h1, div, img").box2d({'y-velocity':5});
});
</script>
<!-- that's it -->
</body>
</html>
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.
