Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change opacity of an area based on mouse position

Is it possible to change the opacity of background but only underneath the cursor area (for example a white small circle)? I am thinking of it a bit like a basic heatmap but the heat doesn't stay - it just follows the cursor.

At the moment I have the following

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

Sorry this is probably a very basic starting point. Would I need to use canvas?

like image 293
xylar Avatar asked May 07 '15 11:05

xylar


1 Answers

You can do that using svg

What i did :-

I placed two same images with same co ordinates,height and width and gave a circular clip-path to the one on top (which has full opacity) when mouse moves the position of the circle also changes

$('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>
like image 152
Akshay Avatar answered Nov 06 '22 20:11

Akshay