Categories
jQuery Parallax

Scrolling Shadows

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 -->

By Dylan Hildenbrand

One reply on “Scrolling Shadows”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.