Siguiendo este tutorial: https://codepen.io/xaviDDB/pen/ExaKeeN Hice una sección en mi sitio web con esta revelación de fondo. aquí está el enlace: http://example.com/abra/ El código funciona bien si no tengo ninguna otra sección en esta página. Pero si lo hago, entonces se vuelve muy extraño. El círculo de revelación se aleja del ratón. Vea la página, he agregado una imagen de caballo y el código se complica. ¿Cómo puedo solucionar esto?
Este es mi código actual:
(function() { let magic = document.querySelector('.magic'); let magicWHalf = magic.offsetWidth / 2; document.body.addEventListener('mousemove', function(e) { magic.style.left = e.pageX - magicWHalf + 'px'; magic.style.top = e.pageY - magicWHalf + 'px'; }); document.body.addEventListener('mouseout', function(e) { //magic.style.left = 'calc(50% - 10rem)'; //magic.style.top = 'calc(50% - 10rem)'; }); })(); .containers { position: relative; height: 100vh; width: 100%; background-color: #ffffff; text-align: center; overflow: hidden; z-index: 1; } .containers:hover { cursor: crosshair; } .text { position: absolute; font-size: 72px; font-family: Arial, Helvetica, sans-serif; color: #000000; bottom: 20%; left: 0; right: 0; z-index: 3; } .magic { position: absolute; top: calc(50% - 10rem); left: calc(50% - 10rem); width: 500px; height: 500px; background: center center no-repeat fixed; background-size: cover; border-radius: 50%; z-index: 2; } <div class="containers"> <div class="text">Lorem Ipsum</div> <div class="magic" style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/hover-reveal.jpg')"></div> </div>Debe agregar la altura del elemento anterior de su div.container
html
<div class="other">Other div </div> <div class="container"> <div class="text">Lorem Ipsum</div> <div class="magic" style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/hover-reveal.jpg')"></div> </div>js
let magic = document.querySelector('.magic'); let magicWHalf = magic.offsetWidth / 2; let heightPrevELm=document.querySelector('.other').offsetHeight; document.body.addEventListener('mousemove',function(e){ magic.style.left = e.pageX - magicWHalf+'px'; magic.style.top = e.pageY - (magicWHalf+heightPrevELm)+'px'; });Puedes ver el resultado aquí: https://codepen.io/bertyn99/pen/YzEwOpO
Pero creo que si son elementos múltiples antes de que necesitemos optimizar el código
Debe actualizar la función de movimiento del mouse en javascript. Tiene que calcular la posición relativa del mouse a su padre (.container)
y una mejora más: configure eventListener en el elemento que desea desplazar. No todo el cuerpo.
(function() { const container = document.querySelector('.container'); const magic = document.querySelector('.magic'); const magicWHalf = magic.offsetWidth / 2; container.addEventListener('mousemove',function(e){ const rect = container.getBoundingClientRect(), scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, scrollTop = window.pageYOffset || document.documentElement.scrollTop; magic.style.left = (e.pageX - (rect.left + scrollLeft)) - magicWHalf+'px'; magic.style.top = (e.pageY - (rect.top + scrollTop)) - magicWHalf+'px'; }); container.addEventListener('mouseout',function(e){ //magic.style.left = 'calc(50% - 10rem)'; //magic.style.top = 'calc(50% - 10rem)'; }); })(); .container { position: relative; height: 100vh; width: 100%; background-color: #ffffff; text-align: center; overflow: hidden; z-index: 1; } .container:hover { cursor: crosshair; } .text { position: absolute; font-size: 72px; font-family: Arial, Helvetica, sans-serif; color: #000000; bottom: 20%; left: 0; right: 0; z-index: 3; } .magic { --size: 20rem; position: absolute; top: calc(50% - var(--size)); left: calc(50% - var(--size)); width: var(--size); height: var(--size); background: center no-repeat fixed; background-size: cover; border-radius: 50%; z-index: 2; } <h1>add</h1> <h1>extra</h1> <h1>space</h1> <h1>at top</h1> <div class="container"> <div class="text">Lorem Ipsum</div> <div class="magic" style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/hover-reveal.jpg')"></div> </div>