tinyBIGideas

A jQuery Gravity Plugin

Make your website come alive by adding a lil' jGravity.

jGravity image 1

Version: 0.8.0
Launched: 29/04/12
Updated: 29/04/12

Download

Description

INTRODUCTION

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, which I think you will find quite similar to how Google presented 'Google Gravity' in an earlier Google easter egg.

I created this plugin because it simply didn't exist. I wanted a gravity type of effect for a current project and searching was very frustrating  with little results. Although, I did find several leads to various other projects which contributed heavily to this plugin (mentioned below in credits).

HOW TO USE

As mentioned, 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.

Simple Example:

<script>

$(document).ready(function() {

     $('body').jGravity();
});

</script>

Advanced Example:

<script>

$(document).ready(function() {

     $('div.jGravity').live('click', function() {
          $('body').jGravity({
               target: 'everything',
               ignoreClass: 'ignoreMe',
               weight: 25,
               depth: 5,
               drag: true
          });
     });
});

</script>

Also, don't be afraid to use multiple jGravity() class on multiple targets to effect them differently.

SETTINGS

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

Example:

  • target: 'everything'
  • ignoreClass: 'ignoreMe'
  • weight: 25
  • depth: 5
  • drag: true

Feel free to play with the above settings until you receive the desired effect.

DEMO

You can find a demo available here: http://tinybigideas.com/assets/demo/jquery-gravity/

CREDITS

jGravity would not be possible without the work of:

Thank you very much for your work on the above guys, I wouldn't have been able to make this work without you. If anyone if interested in more complex interactions with javascript physics engines, please check those guys out.
 
Hopefully that's all you need to know, so go ahead and download and have a play!

Latest Tweetin'

Changelog

Other Ideas

Website IP

IP of the Current website
in a Chrome extension

v1.5.2

CSS Framework

Create full websites
in minutes

v2.3.0

Enlightr.com

Body of wise knowledge
summarised concisely

v6.0.0

Youonlyhave.com

How much productive time
do you have left?

v1.0.0
Mobile Mode: No fancy effects :(

tinyBIGideas

Legal | Contact |