Изменение непрозрачности области на основе положения мыши

Question

Можно ли изменить непрозрачность фона, но только под областью курсора (например, белый маленький круг)? Я думаю об этом немного как о базовой тепловой карте, но тепло не остается - оно просто следует за курсором.

На данный момент у меня есть следующий

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

К сожалению, это, вероятно, очень основной отправной точкой. Должен ли я использовать холст?

Answer 1

Вы можете сделать это с помощью SVG

Что я сделал: -

Я поместил два одинаковых изображения с одинаковыми совместно ординатами, высотой и шириной и дал круглую clip-path к одному на вершине (который имеет полный непрозрачность), когда мышь движется положение окружности также изменяется

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