Transform DOM Elements Into Actual Physical Objects - box2d

File Size: 276 KB
Views Total: 898
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Transform DOM Elements Into Actual Physical Objects - box2d

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

    <head><title>hello world box2d-jquery example</title>

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


    <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="" 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=""></script>

    <!-- include the production version of jquery.box2d.js -->
    <script src="./js/lib/jquery.box2d.min.js"></script>

    <!-- your script starts here -->
      //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});
    <!-- that's it -->


This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.