I've been experimenting with creating a unique visual effect where an image is revealed through a binocular-shaped element that follows the mouse cursor. The circular part of the element moves along with the cursor, unveiling parts of the image as it moves. I also want to ensure that the mouse cursor stays within the boundaries of the main container.
Here's the image used for this effect: https://i.sstatic.net/6ga3Z.png
The surrounding area will remain black, with only the elements visible in the binocular shape as the mouse moves.
Below is the code snippet I've been working with:
$('.clipping-cursor').on('mousemove', function(e) {
var parentOffset = $(this).parent().offset();
var relativeXPosition = (e.pageX - parentOffset.left); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
var relativeYPosition = (e.pageY - parentOffset.top);
$('.clipping-cursor').css({
left: relativeXPosition,
top: relativeYPosition
});
});.collaborate-wrapper {
width: 100%;
height: 90vh;
background: #000;
overflow: hidden;
position: relative;
}
.clipping-cursor {
width: 1000px;
height: 580px;
box-sizing: border-box;
position: absolute;
margin-top: -290px;
margin-left: -500px;
background-image: url('../images/background/collaborate-2.svg');
background-repeat: no-repeat;
background-size: container;
background-attachment: fixed;
background-position: center center;
-webkit-mask-image: url('../images/masking-circle.svg');
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
border: 1px solid #fff;
cursor: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collaborate-wrapper">
<div class="clipping-cursor">
</div>
</div>