Transform DOM Elements Into Actual Physical Objects - box2d

Transform DOM Elements Into Actual Physical Objects - box2d
File Size: 276 KB
Views Total:
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.