Friday, November 16, 2012

jQuery plugin to add gravity effect to your site

Have you seen Google Gravity? The gravity effect is amazing, isn't it? Well, now you can also add gravity effect to your website using a jQuery Plugin "jGravity". jGravity adds gravity to either all or specified elements within a page. Using the plugin is as easy as $('body').jGravity(); which will use default settings to apply the gravity effect.

How to use?

All you need to do is use $('body').jGravity(); to produce the main effect. Calling the jGravity() function produces the best results when used on the main body. Oh, and jQuery is required, tested on jQuery 1.7.2.
$(document).ready(function() {

Available Options

  • target: Enter your target critera e.g. 'div, p, span', 'h2', 'div#specificDiv', or even 'everything' to target everything in the body. You can cover as many different targets as you like.
  • ignoreClass: Specify if you would like to use an ignore class, and then specify the class in quotations, e.g. 'ignoreMe'
  • weight: Enter any numerical value that is greater than 1 to decide the weight of elements (25 is default), you can also use the strings 'heavy' or 'light' to quickly test effects.
  • depth: Enter a numerical value that is greater than 1 to decide depth of gravity and how many elements it affects (1 is default). This is used to prevent targeting structural divs or other items which may break layout in jGravity.
  • drag: Decide if users can drag elements which have been effected by jGravity. Only 'true' and 'false' are acceptable.

Feel free to contact me for any help related to jQuery, I will gladly help you.