Is it feasible to achieve a cursor mirroring effect on a website using Javascript, or similar technology? Imagine a scenario where the line dividing the black and white sections of the page serves as the "reflection line." In this setup, moving the cursor in the top black segment would produce an inverse cursor image and action in the bottom white segment, and vice versa.
I would appreciate any guidance or starting points—no pun intended. Thank you!
Edit: I attempted to implement .mousemove(), event.pageX, event.pageY based on suggestions provided (as shown below). However, being new to Javascript, I encountered difficulties getting it to function properly.
cursor.html
<doctype! html>
<head>
<link rel="stylesheet" href="cursor.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="cursor.js"></script>
<title> Cursor Mirror </title>
</head>
<body>
<div class="top-half-black"></div>
<div class="bottom-half-white">
<img id="mirror-image" src="upside-down.png">
</div>
<script>
$(".top-half-black").mousemove(function(event){
var xPosition = event.pageX;
var yPosition = event.pageY;
})
function placeCursor() {
var d = document.getElementById('mirror-image');
d.style.position = "absolute";
d.style.left = xPosition+'px';
d.style.top = -yPosition+'px';
}
$( ".top-half-black").mouseover(function( event ){
placeCursor () ;
})
</script>
</body>
</html>
cursor.css
body{
margin:0px 0px 0px 0px;
}
.top-half-black{
background-color:black;
width:100%;
height:50%;
}
Desired Outcome: