Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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!



Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: