Cambia opacità di un'area in base alla posizione del mouse

Question

È possibile modificare l'opacità dello sfondo ma solo al di sotto dell'area del cursore (ad esempio un piccolo cerchio bianco)? Lo sto pensando un po 'come una mappa termica di base, ma il calore non rimane - segue solo il cursore.

Al momento ho il seguente

HTML:

html { 
    background-color: #000; 
    width: 100%; 
    height: 100%; 
} 

JS:

$(document).mousemove(function(event){ 
    var i = event.pageX.toPrecision(1)/1000; 
    $("html").css('opacity', i) 
}); 

Spiacente, questo è probabilmente un punto di partenza molto di base. Dovrei usare la tela?

Answer 1

È possibile farlo usando svg

quello che ho fatto: -

ho messo due stesse immagini con le stesse coordinate co, altezza e larghezza e ha dato una circolare clip-path a quello in alto (che ha il pieno opacità) quando il mouse si sposta la posizione del cerchio cambia anche

$('svg').on('mousemove',function(e){ 
 
    $('.a').attr('cx',e.pageX).attr('cy',e.pageY) 
 
     
 
})

.one{ 
 
    opacity:.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg width="500" height="500"> 
 
    <clippath id="clip" > 
 
     <circle cx="50" cy="50" r="50" class="a"/> 
 
    </clippath> 
 
    
 
    <image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" class="one"/> 
 
     
 
    <image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" clip-path="url(#clip)"/> 
 
    </svg>