---

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.

Examples

• Landscape
• Pyramid
• Squares
• Lines
• Dots
• Neon

Usage

By default, OKShadow binds to a div:

    $(function(){
    	$('#example1').okshadow();
    });

OKShadow also works on text. In this case the shadow's size and movement are restricted.

$('#example2').okshadow({
  color: '#555',
  textShadow: true,
  xMax: 5,
  yMax: 0,
  yOffset: 3,
  fuzzMin: 1,
  fuzzMax: 3,
});

In the last example, the transparent parameter makes the text invisible but leaves the shadow, producing a ghost text effect. Additionally, CSS is used to make the text come sharply into focus on hover (use !important), while a fuzzMin setting keeps the other links blurry as the mouse grows near:

$('#example3 a').okshadow({
  color: 'blue',
  textShadow: true,
  transparent: true,
  xMax: 0,
  yMax: 0,
  fuzzMin: 1.5,
  fuzz: 30
});

css:
  a:hover {
    color: red !important;
    text-shadow: none !important;
  }

Mobile

OKShadow also works on mobile browsers that implement the DeviceOrientation event -- iPhones, iPads, and more recent Android devices.

The parameter downwards forces conventional drop shadow behavior when the device is upside-down -- that is, shadows only appear below an object, regardless of device orientation. Set to false to disable.

Avoid big shadows on mobile: large values of fuzzMax can cause mobile Safari to lag severely. We recommend keeping this below about 50.

Check out this demonstration on your device of choice!

Options

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	30
xOffset	horizontal offset, in pixels	0
xFactor	affects blur position based on mouse distance	30
yMax	vertical movement constraint, in pixels	30
yOffset	vertical offset, in pixels	0
yFactor	affects blur position based on mouse distance	30
fuzzMin	minimum blur radius in pixels	0
fuzzMax	maximum blur radius in pixels	30
fuzzFactor	affects blur radius based on mouse distance demonstration of factors	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.

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

On dynamic web apps, use the methods pause and unpause to turn an instance of OKShadow on and off -- see this demonstration.

Download OKShadow or Contribute on Github

Follow @okfocus

License

Copyright © 2011 OKFocus, http://okfoc.us

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
“Software”), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.