I'm new to coding and I've been trying to solve this problem for a while now. I'm currently teaching myself how to make a circle mask move with the mouse. I've figured out how to create the mask but I'm struggling to add the script to it; this is what I've got so far (project so far using random image). I'm really stuck and I'd really appreciate it if anyone can take a look at my code and provide insight.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mask-container">
<img src="./image/simpsons.jpeg"
alt="Morraine Lake" id="clipped-image">
</div>
</body>
</html>
CSS
:root {
--clip-position: center;
}
body {
background-color: black;
margin: 0;
}
.mask-container img {
object-fit: cover;
display: block;
width: 100%;
height: 100vh;
-webkit-clip-path: circle(200px);
clip-path: circle(200px);
}
MAIN.JS
const $cImg = $('#clipped-image');
const $body = $('body');
$body.mousemove(function(e) {
$cImg.css('--clip-position', `${(e.pageX - 100)}px ${(e.pageY - 100)}px`);
});
This code is wrong I would recommend this and there is not really any other way unless you use HTML but still have the function for mousemove like this:
var $cImg = $("#clipped-image");
var body = document.getElementsByTagName("body");
body.mousemove(function(e) {
$cImg.css("border-radius", e.pageX-100+"%");
$cImg.css("border-radius", e.pageY-100+"%");
});
I can't test right now but I hope this works.