JSFiddle - React, Tailwind, and code Playground

by Uncle Bens

HTML

<div id="logo" class="ui-draggable"></div>
<div id="logosh"></div>

CSS

#logo {
    background: url("http://pushingpixels.at/experiments/dynamic_shadow/logo.png") no-repeat scroll 0 0 transparent;
    height: 150px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 450px;
    z-index: 700;
}

#logosh {
    background: url("http://pushingpixels.at/experiments/dynamic_shadow/logo-shadow.png") no-repeat scroll 0 0 transparent;
    height: 150px;
    left: 29.5%;
    position: absolute;
    top: 40.5%;
    width: 450px;
    z-index: 600;
}

JavaScript

$(function(){
    var shadowOffset    =    1.08;                                    // shadow offset
    var logo            =    $("#logo");                                // logo container
    var logoCenterX        =    parseInt(logo.width()/2);                // center of logo - X-axis
    var logoCenterY        =    parseInt(logo.height()/2);                // center of logo - Y-axis
    var logoshadow        =    $("#logosh");                            // shadow container
    var logoShdwCenterX    =    parseInt(logoshadow.width()/2);            // center of shadow - X-axis
    var logoShdwCenterY    =    parseInt(logoshadow.height()/2);        // center of shadow - Y-axis
    


    logoshadow.fadeTo(750,0.7);        
    

    function moveShadow(e){
        lightX            =    e.pageX;
        lightY            =    e.pageY;

        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": (1.2 - shadowDistance /1000) });

    }
  
  $(document.body).mousemove(function(event){ moveShadow(event); });
});