Spotlight and shadow effects in all css/javascript.

A-Pen-by-Jon-Eisen.markdown

Spotlight and shadow effects in all css/javascript.

A Pen by Jon Eisen on CodePen.

License.

index.html

<div class="all">
  <div class="block"></div>
  <div class="overlay"></div>
</div>

script.js

var color = '#444444',
    blur = 8,
    radius = 50,
    $el = $('.block'),
    $all = $('.all'),
    $over = $('.overlay'),
    midx = $all.width() / 2,
    midy = $all.height() / 2,
    midr = Math.sqrt(midx*midx+midy*midy);

function setBoxShadow(xr, yr, r) {
  var h = (r * radius * xr).toFixed(2),
      v = (r * radius * yr).toFixed(2),
      shadow = [h,v,(blur*radius)/200,color].join('px ');
  $el.css({
    'box-shadow': shadow,
    '-webkit-box-shadow': shadow
  });
}

function setOverlayBackground(xr, yr, r) {
  var h = xr.toFixed(2) * 100,
      v = yr.toFixed(2) * 100,
      background = '-webkit-radial-gradient('+h+'% '+v+'%, circle closest-corner, rgba(0,0,0,0), black)';
  $over.css('background', background);
}

$('.all').mousemove(function onmousemove(event) {
  var x = midx - event.offsetX,
      y = midy - event.offsetY;
      r = Math.sqrt(x*x+y*y);
  setBoxShadow(x / r, y / r, r / midr);
  setOverlayBackground(event.offsetX / midx / 2, event.offsetY / midy / 2, 1);
});

setBoxShadow(1/Math.sqrt(2),1/Math.sqrt(2), 1);
setOverlayBackground(.5, .5, 1);

style.scss

@import "compass";

.all {
  position: absolute;
  border: 1px gray solid;
  height: 500px;
  width: 500px;
}

.block {
  position: absolute;
  top: 40%;
  left: 40%;
  height: 20%;
  width: 100px;
  border-radius: 5%;
  background-color: #107d85;
}

.overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  background: -webkit-radial-gradient(0.5 0.1, circle closest-corner, rgba(0,0,0,0), black)
}