<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="cursor"></div>
<div class="outerContainer">
<div class="side leftSide">
<div class="content">Anahit</div>
</div>
<div class="side rightSide">
<div class="content ">Anahit</div>
</div>
</div>
<script>
const elements={
outerContainer:document.querySelector(".outerContainer"),
leftContent:document.querySelector(".leftSide .content"),
rightContent:document.querySelector(".rightSide .content"),
cursor:document.querySelector(".cursor")
}
const {cursor,outerContainer,leftContent,rightContent}=elements;
outerContainer.onmousemove=function(e){
cursor.style.left=e.pageX+"px";
cursor.style.top=e.pageY+"px";
if(e.pageX>=innerWidth/2){
cursor.style.backgroundColor="white"
}else{
cursor.style.backgroundColor="#333"
}
let newNum=((e.pageX - innerWidth/2)/(innerWidth/2));
let newNum2=((e.pageY - innerHeight/2)/(innerHeight/2));
console.log(newNum)
