Soy nuevo en la codificación y he estado tratando de resolver este problema por un tiempo. Actualmente estoy aprendiendo cómo hacer que una máscara circular se mueva con el mouse. Descubrí cómo crear la máscara, pero me cuesta agregarle el script; esto es lo que tengo hasta ahora (proyecto hasta ahora usando una imagen aleatoria) . Estoy realmente atascado y realmente agradecería si alguien puede echar un vistazo a mi código y proporcionar información.
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); }PRINCIPAL.JS
const $cImg = $('#clipped-image'); const $body = $('body'); $body.mousemove(function(e) { $cImg.css('--clip-position', `${(e.pageX - 100)}px ${(e.pageY - 100)}px`); });Este código es incorrecto, lo recomendaría y realmente no hay otra forma a menos que use HTML pero aún tenga la función para mover el mouse de esta manera:
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+"%"); });No puedo probar ahora, pero espero que esto funcione.