3 ms·
Oh I see. This requires the overlay to have enough extra black space on all sides, right? Like this: #blackout { position: fixed; z-in
by voussoir 4y ago
Oh I see. This requires the overlay to have enough extra black space on all sides, right? Like this:
#blackout
{
position: fixed;
z-index: 1;
inset: -100%;
background: radial-gradient(circle at center, transparent 0px, transparent 100px, black 110px);
transform: translate(var(--lightx), var(--lighty));
pointer-events: none;
}
document.body.addEventListener("mousemove", function(e){
document.documentElement.style.setProperty('--lightx', (e.clientX - (document.body.clientWidth/2)) + "px");
document.documentElement.style.setProperty('--lighty', (e.clientY - (document.body.clientHeight/2)) + "px");
});
This works too. I'm finding that while the dev tools are open, the transform method drops to very low fps whereas the recalculating method only loses a bit of fps. While the dev tools are closed they seem to be equal on my computer. Of course on a weaker computer there might be a bigger difference.
Thanks!