Scrolling Shadows – closingtags </>
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 ="blur");
var spread ="spread");
var xpos ="xpos");
var dir ="direction");

var ypos = null;
ypos = (jQuery(window).scrollTop() /'speed'));
else {
ypos = -(jQuery(window).scrollTop() /'speed'));

object.css("box-shadow", xpos+"px "+ypos+"px "+blur+"px "+spread+"px rgba(0, 0, 0, 0.5)");


var object = jQuery("#object");

jQuery( window ).resize(function() {

jQuery(window).scroll(function () {


<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">
</div><!-- #content -->

By Dylan Hildenbrand

Author and full stack web developer experienced with #PHP, #SvelteKit, #JS, #NodeJS, #Linux, #WordPress, and #Ansible. Check out my book at!

Do you like these posts? Consider sponsoring me on GitHub!

Dylan Hildenbrand smiling at the camera. I have tossled, brown hair, rounded glasses, a well-trimmed and short beard. I have light complexion and am wearing a dark sweater with a white t-shirt underneath.

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.