SOURCE

var arr = new Array();

var h;
var w;
$.move = function (lense) {
  var left = $(lense).position().left;
  var top = $(lense).position().top;
  var size = $(lense).outerWidth() + 10;

  var dirH = parseInt($(lense).attr('dirH'));
  var dirV = parseInt($(lense).attr('dirV'));

  if ($(lense).attr('dirH') == undefined && $(lense).attr('dirV') == undefined) {
    var multiple = Math.max(Math.random() * 25,15);
    dirH = Math.round(Math.random() > .5 ? -multiple : multiple);
    dirV = Math.round(Math.random() > .5 ? -multiple : multiple);
  }

  if (left >= w - size - 10 || left <= 10) {
    dirH = -dirH;
  }

  if (top >= h - size - 10 || top <= 10) {
    dirV = -dirV;
  }

  if (!$('.lense').hasClass('clicked')) {
    $(lense).animate({
      left: (left + dirH),
      top: (top + dirV)
    }, 'fast', 'linear', function () {
      setTimeout(function () { $.move(lense); }, 1);
    })
      .attr('dirH', dirH)
      .attr('dirV', dirV);
  }
}


$(document).ready(function () {
  h = $('#canvas').outerHeight();
  w = $('#canvas').outerWidth();
  $('.lense').draggable({ containment: "#canvas"});;

  arr.push('http://images.akamai.steamusercontent.com/ugc/576770647130570399/3F307A48D22567DB550D7E1E5404658F09AC2461/');
  arr.push('http://images.akamai.steamusercontent.com/ugc/558759333000489477/720DB9213526F00774BF815DAC50E2AFDE40A253/');
  arr.push('http://images.akamai.steamusercontent.com/ugc/576770647227903806/C59A9927AD6A26933E98A42DE512AAC55646CFFA/');
  arr.push('http://images.akamai.steamusercontent.com/ugc/920140862010393983/DC09F5A587F8B68A007B6141F6DDCD8C503D67DA/');
  arr.push('http://images.akamai.steamusercontent.com/ugc/939255420022298813/985EC0435A37FC87183720D06CA44ACDD234E833/');
  arr.push('http://images.akamai.steamusercontent.com/ugc/594686769612182619/9AEA8231E4E396996F542185D84CBFB00330D490/');
  arr.push('http://images.akamai.steamusercontent.com/ugc/261597225399979289/562474EB3D9E089FC46B52792E00CF875238C61D/');
  arr.push('http://images.akamai.steamusercontent.com/ugc/259346970401445315/9910FAA1E2BF9A51105EC0340A3C896F33B12390/');


  $('.lense').css({ 'background-image': 'url(' + arr[0] + ')' });

  $('.lense').mousedown(function () {
    $('.lense').addClass('clicked');
  });

  $('.lense').mouseup(function () {
    $('.lense').removeClass('clicked');
    $.move($('.lense'));

  });

  $('#canvas').click(function () {
    var i = parseInt($('.lense').attr('i'));
    i++;

    if (i == arr.length) {
      i = 0;
    }
    $('.lense').css({'background-image': 'url(' + arr[i] + ')'});


    $('.lense').attr('i', i);

  });

  $.move($('.lense'));


  $(window).resize(function () {
    h = $('#canvas').outerHeight();
    w = $('#canvas').outerWidth();
  });
});

<div id="canvas">
  <div class="lense" i="0">
    <div>
      <div></div>
    </div>
  </div>
</div>

body {
  padding: 0px;
  margin: 0px;
  background-color: black;
  text-align: center;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: hidden;
}

#canvas {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  background-color: darkslategrey;
}

.lense {
  position: absolute;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  top: 45%;
  left: 45%;
  z-index: 1;
  /*background-image: url(http://images.akamai.steamusercontent.com/ugc/576770647130570399/3F307A48D22567DB550D7E1E5404658F09AC2461/);*/
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  box-shadow: inset 0 0 30px darkslategrey, 0 0 10px black;
  cursor:pointer;
}

.lense:before,
.lense:after,
.lense div,
.lense div:before,
.lense div:after {
  content: '';
  border-radius: 50%;
  position: absolute;
  background-image: inherit;
  background-position: inherit;
  background-repeat: inherit;
  background-attachment: inherit;
  pointer-events:none;
}


.lense:before,
.lense div:before {
  top: 10px;
  bottom: 10px;
  right: 10px;
  left: 10px;
}


.lense div {
  top: 30px;
  bottom: 30px;
  right: 30px;
  left: 30px;
}

.lense:after,
.lense div:after {
  top: 20px;
  bottom: 20px;
  right: 20px;
  left: 20px;
}


.lense:before {
  background-size: 105% 105%;
  z-index: 10;
}

.lense:after {
  background-size: 110% 110%;
  z-index: 100;
}

.lense > div {
  background-size: 115% 115%;
  z-index: 1000;
}

.lense > div:before {
  background-size: 120% 120%;
  z-index: 10000;
}

.lense > div:after {
  background-size: 125% 125%;
  z-index: 100000;
}

.lense > div > div {
  background-size: 130% 130%;
  z-index: 1000000;
}

.lense > div > div:before {
  background-size: 135% 135%;
  z-index: 10000000;
}

.lense > div > div:after {
  background-size: 140% 140%;
  z-index: 100000000;
}