Web Dev

jQuery Photorealistic shadows

2012-04-30

jQuery Plugin that casts photorealistic shadows. Real Shadow works by targeting any number of elements and manipulating the value of box-shadow (if browser supports this CSS property) for the elements in accordance with the mouse position.

Basic Usage

$(selector).realshadow(); // options are optional
$(selector).realshadow({
    followMouse: false,   // true by default

    pageX:       x,       // x coordinate of the light source
    pageY:       y        // y coordinate of the light source

    c: {                  // shadow color
        r: 1,             // red   channel for shadow
        g: 1,             // green channel for shadow
        b: 1,             // blue  channel for shadow
    }

});

To specify different colors for each element, you can use "rel" attribute:

<span rel="r"></span>
<span rel="g"></span>
<span rel="b"></span>
<span rel="rg"></span>
<span rel="gb"></span>
<span rel="br"></span>
$('span').realshadow();

Note: Effect has a small disadvantage – it works correctly only with a full windowed browser.

Works in any browser supporting CSS box-shadow property
Requirements: jQuery
Compatibility: All Modern Browsers
Website: http://indamix.github.com/real-shadow/
Download: https://github.com/Indamix/real-shadow/