<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> <!------ Include the above in your HEAD tag ----------> <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) leftContent.style.transform=`translate(${50 - (newNum*30)}%,${(newNum2*10)}%)`; rightContent.style.transform=`translate(${-50 - (newNum*30)}%,${(newNum2*10)}%)` } </script>

*{ margin: 0; padding: 0; box-sizing: border-box; font-family: impact; } .outerContainer{ width: 100%; height: 100vh; display: flex; cursor:url(circle-shape-outline.png),auto; } .outerContainer *{ cursor:url(circle-shape-outline.png),auto } .outerContainer .side{ width: 50%; height: 100%; display: flex; overflow: hidden; font-size: 100px; font-family: impact; } .outerContainer .leftSide{ justify-content: flex-end; align-items: center; color: #333; } .outerContainer .rightSide{ justify-content: flex-start; align-items: center; color: white; background-color: #333; } .leftSide .content{ transform: translateX(50%); /* color: #333; */ } .rightSide .content{ transform: translateX(-50%); } .cursor{ /* transform: translate(-50%,-50%); */ position: fixed; width: 30px; height: 30px; border-radius: 50%; background-color: #333; transition: 400ms; cursor:url(circle-shape-outline.png),auto /* cursor: */ }