By following this tutorial :https://codepen.io/xaviDDB/pen/ExaKeeN I made a section in my website with this background reveal. here is the link:http://example.com/abra/ The code works fine if I do not have any other section in this page. But if I do, then it gets very strange. The reveal circle move away from the Mouse. See the page, I have added a horse image & the code gets messy. How do I solve this?

This is my current code:

(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 >
  <div >Lorem Ipsum</div>
  <div  style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/hover-reveal.jpg')"></div>
</div>

CodePudding user response：

You have to update your mouse-move function in javascript. It has to calculate the relative mouse position to its parent (.container)

and one more improvement: set the eventListener on the element you want to hover. Not the entire body.

    (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 >
  <div >Lorem Ipsum</div>
  <div  style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/hover-reveal.jpg')"></div>
</div>

CodePudding user response：

You need to add the height of the previous element of your div.container

html

<div >Other div </div>
<div >
 <div >Lorem Ipsum</div>
 <div  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';
  });

You can see the result here : https://codepen.io/bertyn99/pen/YzEwOpO

But i think if they are multiple element before we need to optimize the code