Dynamic PNG shadow position & opacity with jQuery
by Daniel Kurdoghlian

The Source Code

Below you can see the magic interesting part of my script:

function moveShadow(){
    lightX          = parseInt(lightbulb.offset().left) + lightCenterX;
    lightY          = parseInt(lightbulb.offset().top) + lightCenterY;
    logoX           = parseInt(logo.offset().left) + logoCenterX;
    logoY           = parseInt(logo.offset().top) + logoCenterY;
    distanceX       = logoX - lightX;
    distanceY       = logoY - lightY;
    distance        = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));
    shadowDistance  = distance * shadowOffset;
    shadowPosLeft   = (distanceX / distance * shadowDistance + lightX - logoShdwCenterX) + "px";
    shadowPosTop    = (distanceY / distance * shadowDistance + lightY - logoShdwCenterY) + "px";
    logoshadow.css({ "left": shadowPosLeft, "top": shadowPosTop, "opacity": setOpacity(shadowDistance) });
}

This is, what makes the correct positioning of the shadow <div>. Just assign this function to a dragging event (+ window-resize & load) and you have your dynamic positioning.

Just look at the source code of this page, the JavaScript and the CSS, to see it in more detail.

Some Explenation

..will be added soon!