<div id='layers'>
<img src='rjDAGHW.jpg' id="bg">
  <img src='Kuwy4hu.png' id="dirt">
<img src='JqIXqs2.png' id="runner">
<div id=instructions>передвигайте мышку</div>
</div>

#layers {
  position:relative;
  width:1200px;
  left: 50%;
  height:600px;
  margin-left:-600px;
  overflow:hidden;
  -webkit-transform-style: preserve-3d;
}
img {
  -webkit-transform: translate3d(0, 0, 0);
}
#layers #runner {
  position:absolute;
  top:0px;
  left:0px;
}
#layers #dirt {
  position:absolute;
  top:0px;
  left:0px;
}
#instructions {
  width:400px;
  margin-left:400px;
  height:20px;
  text-align:center;
  font-size:12pt;
  position:absolute;
  top:10px;;
  font-family:Helvetica,Arial;
  left:0;
  background:rgba(0,0,0,0.6);
  border-radius:10px;
  color:white;
}

var mouseY = 0;
getBlur = function(depth){
  var result = Math.abs(depth-mouseY/50);
  return result;
};
$(document).ready(function() {
  $(window).mousemove(function(e){
  mouseY = e.pageY;
  $('#bg').attr('style','-webkit-filter:blur('+getBlur(2)+'px);');
  $('#dirt').attr('style','-webkit-filter:blur('+getBlur(3)+'px);');
  $('#runner').attr('style','-webkit-filter:blur('+getBlur(5)+'px);');
  });
});