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 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>You need to add the height of the previous element of your 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';
});
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
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 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>