JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<div id="posme"></div>



<div id="gozler">
  <span id="solGoz"></span>
  <span id="sagGoz"></span>
</div>

CSS

#gozler {
  width: 220px;
  height: 100px;
  position: relative;
  background: Red;
}

#solGoz {
  background: black;
  width: 80px;
  height: 80px;
  display: block;
  border-radius: 100%;
  position: absolute;
  left: 10px;
  top: 10px;
}

#sagGoz {
  background: black;
  width: 80px;
  height: 80px;
  display: block;
  border-radius: 100%;
  position: absolute;
  right: 10px;
  top: 10px;
}

JavaScript

$(document).mousemove(function(event) {
	var ortalaX = parseInt($(window).width()/2);
	var ortalaY = parseInt($(window).height()/2);
  var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
	var yuzdeY = parseInt((event.clientY*100)/ortalaY);
	var yuzdeYY = parseInt((-)/);
	
  $("#gozler").css("top", event.clientY).css("left", event.clientX);
  $("#posme").html(yuzdeY);
	
	
	

	if(event.clientX < ortalaX)
	{
		$('#solGoz').css('left' , '0');
		$('#sagGoz').css('right' , '20px');
	}
	else if(event.clientX > ortalaX)
	{
		$('#solGoz').css('left' , '20px');
		$('#sagGoz').css('right' , '0');
	}
	else
	{
		$('#solGoz').css('left' , '10px');
		$('#sagGoz').css('right' , '10px');
	}
	
	
	
	
	
	
	
	
	
	
	if(event.clientY < ortalaY)
	{
		$('#solGoz').css('top' , '0');
		$('#sagGoz').css('top' , '0');
	}
	else if(event.clientY > ortalaY)
	{
		$('#solGoz').css('top' , '20px');
		$('#sagGoz').css('top' , '20px');
	}
	else
	{
		$('#solGoz').css('top' , '10px');
		$('#sagGoz').css('top' , '10px');
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
});