带有 css、html、javascript 的聚光灯效果

Question

I've designed a spotlight effect with css, html and java. This is the link to the page: https://civitonia.com/ The spotlight follows the cursor, but as you can see, when you refresh the page or when you open it, the spotlight is not center on the page but you can see it a the bottom right. I'd like to set a "center point" or something similar that send the spotlight effect at the center of the page every time I refresh it/open it. Is it possible?

CSS:

.spotlight {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: radial gradient(circle, transparent 160px, rgba(0, 0, 0, 0)
    200px);
    }

SCRIPT:

<script>
    window.addEventListener("DOMContentLoaded", () => {
        const spotlight = document.querySelector('.spotlight');
        let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
        window.addEventListener('mousemove', e => updateSpotlight(e));
        function updateSpotlight(e) {
            spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
        }
    });
    </script> 

Answer 1

You can set spotlight to center by setting its radial gradient at half of window's innerWidth and innerHeight on "DOMContentLoaded" .

window.addEventListener("DOMContentLoaded", () => {
        const spotlight = document.querySelector('.spotlight');
        let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
        spotlight.style.backgroundImage = `radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`;
        window.addEventListener('mousemove', e => updateSpotlight(e));
        function updateSpotlight(e) {
            spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
        }
    });

Snippet:

 window.addEventListener("DOMContentLoaded", () => { const spotlight = document.querySelector('.spotlight'); let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)'; spotlight.style.backgroundImage = `radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`; window.addEventListener('mousemove', e => updateSpotlight(e)); function updateSpotlight(e) { spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`; } });

 .spotlight { position: fixed; width: 100%; height: 100%; pointer-events: none; background-image: radial-gradient(circle, transparent 160px, rgba(0, 0, 0, 0) 200px); }

 <div class="spotlight"></div>

---

To absolutely position the spotlight on mobile screen can use matchMedia method, to check the min width of the screen. Based on that, you can attach the mouse move event listener to it. In the code below, if min width is less than 800px, the spotlight is placed at center of screen else it will add the mousemove event listener to it.

Also, you might want to handle window resize ie remove the mousemove event listener and reposition the spotlight if min width becomes < 800px and reattach the listener if becomes > 800px again (after becoming < 800px)

 window.addEventListener("DOMContentLoaded", ()=>{ const spotlight = document.querySelector('.spotlight'); let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)'; //attach mousemove event listener if media query matches. if (matchMedia('only screen and (min-width: 800px)').matches) { window.addEventListener('mousemove', updateSpotlight); function updateSpotlight(e) { spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`; } } else { spotlight.style.backgroundImage = `radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`; } });

 .spotlight { position: absolute; width: 100%; height: 100%; pointer-events: none; background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0.85) 200px); } @media only screen and (min-width: 800px) { .spotlight { position: fixed; background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0) 200px); } }

 <div class="spotlight"></div>