Ändern der Opazität eines Bereichs basierend auf der Mausposition

Question

Ist es möglich, die Deckkraft des Hintergrunds zu ändern, aber nur unterhalb des Cursorbereichs (z. B. ein weißer kleiner Kreis)? Ich denke dabei ein bisschen wie eine grundlegende Heatmap, aber die Hitze bleibt nicht - sie folgt nur dem Cursor.

Im Moment habe ich folgendes

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) 
}); 

Leider ist dies wahrscheinlich eine sehr grundlegende Ausgangspunkt. Benötige ich Leinwand?

Answer 1

können Sie tun das, svg mit

Was ich tat: -

Ich legte zwei gleiche Bilder mit gleichen co Koordinaten, Höhe und Breite und gab einen kreisförmigen clip-path zum über (die voll hat Opazität), wenn die Maus die Position des Kreises bewegt sich auch

$('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>