okshadow

OKShadow by OKFocus

OKShadow is a jQuery plugin that produces drop shadows that track the mouse cursor. Many effects are possible, including depth-of-field simulation and focus effects. See examples here.

Usage

OKShadow can bind to any DOM element that recognizes the CSS3 box-shadow or text-shadow property.

Options

option	description	default
color	sets shadow color	#888
textShadow	applies the shadow to the text; otherwise, the shadow affects the container (“box-shadow”)	false
transparent	sets text color to transparent for ghost text effect	false
downwards	on mobile browsers, shadows will only move downwards	true
xMax	horizontal movement constraint, in pixels	null
yxOffset	horizontal offset, in pixels	0
xFactor	affects blur position based on mouse distance	30
yMax	vertical movement constraint, in pixels	null
yOffset	vertical offset, in pixels	0
yFactor	affects blur position based on mouse distance	30
fuzzMin	minimum blur radius in pixels	null
fuzzMax	maximum blur radius in pixels	null
fuzzFactor	affects blur radius based on mouse distance	40

Methods

OKShadow offers the method setoption so parameters can be changed after instantiation. It takes either a hash of parameters or a single key and value. For example:

$('#ok').okshadow();
$('#ok').data("okshadow").setoption({
  "color": "red",
  "fuzzMin": 10,
});

For use in dynamic web apps, use the pause and unpause methods to turn the effect on and off.

Run Tests

OKFocus tests JavaScript with Jasmine. Run tests:

$ bundle install
$ jasmine init
$ rake jasmine