This plugin is derived from the same idea that was posted here, except in a much simpler form and using HTML5 to control the shadow attributes.
The jQuery looks like this:
function calculateShadow(object){
/* 12/5/13 Dylan Hildenbrand */
var blur = object.data(“blur”);
var spread = object.data(“spread”);
var xpos = object.data(“xpos”);
var dir = object.data(“direction”);
var ypos = null;
if(dir==”down”){
ypos = (jQuery(window).scrollTop() / object.data(‘speed’));
}
else {
ypos = -(jQuery(window).scrollTop() / object.data(‘speed’));
}
object.css(“box-shadow”, xpos+”px “+ypos+”px “+blur+”px “+spread+”px rgba(0, 0, 0, 0.5)”);
}
jQuery(document).ready(function(){
var object = jQuery(“#object”);
calculateShadow(object);
jQuery( window ).resize(function() {
calculateShadow(object);
});
jQuery(window).scroll(function () {
calculateShadow(object);
})
});
The HTML:
<div id=”content” class=”site-content” role=”main”>
<!– Elements on object set parameters for box shadow
data-direction: move shadow up or down
data-blur: shadow blur
data-spread: shadow spread
data-speed: speed of shadow movement; less means faster
data-xpos: x-position of shadow
data-ypos: y-position of shadow
–>
<div id=”object” data-blur=”10″ data-spread=”3″ data-xpos=”10″ data-ypos=”20″ data-speed=”8″ data-direction=”down”>
obj
</div>
</div><!– #content –>