jQuery.proximity plugin demo

Proximity is a jQuery plugin that enables interface provides information about the position of the cursor relative to html elements. The pugin is called on mousemove events and returns an object containing the distance and angle of the cursor relative to the target element and a reference to the target element itself.

It doesn't do any effects itself, that's all up to you, so you'll need some Javascript and CSS skills to use it - but in return you have complete control.

Usage

Using Proximity is simple:

• Include jQuery in you page.
• Include the Proximity plugin in your page
• Call initialise Proximity on the elements of you choice like this: $('.element').proximity(callbackFunction);
• Proximity takes one arguement which is either an a function or array of functions that you want to be called when the cursor position changes. These functions will be called with one arguement - an object containing the distance and angle information and a reference to the target element.

Basic demo

Here I've set Proximity to watch the grey box and am just printing out the information that is returned by the plugin. You need to do something with this in your own callback function specified when you initialise Proximity.

Angle/background colour demo

The boxes below have thier background colour set according to the angle of the cursor to their center.