Básicamente, he visto muchos sitios web de animación avanzada. Y traté de crear una imagen en la que sigue las imágenes mientras muevo el cursor del mouse junto con las coordenadas div.

Básicamente, el código es así en mi codepen.

https://codepen.io/myth-vince/pen/PoQJOXj

Cuando intente mover el cursor a la imagen... será como si se teletransportara en la parte superior izquierda porque creo que esa es la altura y el ancho rectos constantes de la imagen.

Si alguien me puede ayudar con esto... Será un gran agradecimiento. Creé algunas animaciones avanzadas como esta, pero nunca me encontré con esto antes de que simplemente me teletransporte de repente.

creo que tiene algo con esto

 var rect = e.target.getBoundingClientRect(); console.log(rect) var x = e.clientX - rect.left; //x position within the element. var y = e.clientY - rect.top; //y position within the element.

O tal vez el SCSS, pero no sé dónde porque todo parece estar bien ... pero creo que el único problema real aquí es que cuando intento hacer que también centre la imagen en el cursor del mouse, simplemente se ajustará y no se alineará. centro del cursor del mouse porque está evitando que se teletransporte.

EDITAR

Para obtener más información, la parte de mouseover y mousemove , mousemove, solo comenzará cuando el mouse esté pasando el div, por lo que la imagen comenzará a moverse.

Ahora, por el segundo, necesito obtener e.clientX y e.clientY para que pueda llegar a donde está la parte de div. Y como rectX y rectY es obtener la parte de alto y ancho

Mostrar DIV en el cursor del mouse sobre el desplazamiento del intervalo

Puedes verlo aquí el enlace.

y de dónde saqué el retraso del movimiento de las imágenes está aquí

https://stackoverflow.com/questions/9136261/how-to-make-a-setinterval-stop-after-some-time-or-after-a-number-of-actions#:~:text=To%20stop %20it%20después%20de ejecutarse, alcanzó%20ese%20número%20claro%20it .