0

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`);
});
98SSVM
  • 49
  • 1
  • 7
  • You might be able to find what your looking for here : [https://stackoverflow.com/questions/39654546/interactive-background-mask-with-mousemove-jquery-css](https://stackoverflow.com/questions/39654546/interactive-background-mask-with-mousemove-jquery-css) – slashroot Nov 14 '21 at 14:52

1 Answers1

0

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.

Ryan's World
  • 70
  • 10
  • Thank you so much for your answer, I decided to try using your script both in the HTML and in a separate main.js file and it still didn't work. Do you think there might be any other possible errors that I am not seeing? – 98SSVM Nov 13 '21 at 07:41