JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div>

</div>
<div></div>
<div></div>

CSS

body {
  background: #000;
  position: relative;
}
div:nth-child(1) {
  position: absolute;
  background: #F00;
  width: 400px;
  height: 400px;
  top: 100px;
  left: 100px;
}
div:nth-child(2) {
  position: absolute;
  background: #0f0;
  width: 300px;
  height: 300px;
  top: 150px;
  left: 150px;
}
div:nth-child(3) {
  position: absolute;
  background: #00F;
  width: 200px;
  height: 200px;
  top: 200px;
  left: 200px;
}

JavaScript

var fix = {
	x: $(window).width()/2,
  y: $(window).height()/2
};

$(document).on('mousemove', function(event) {
	var x = event.pageX;
	var y = event.pageY;
  var ks = [-0.5, -0.7, -0.9];
  for(var i = 0; i < ks.length; i++) {
    var s = {
      w: $('div').eq(i).width(),
      h: $('div').eq(i).height()
    };
  	$('div').eq(i).css({
    	top: ks[i]*y - ks[i]*fix.y + (fix.y-s.h/2)+'px',
      left: ks[i]*x - ks[i]*fix.x + (fix.x-s.w/2)+'px'
    });
  }
});