0

I'm practicing my Javascript, so i made a follow-mouse function. I got it working, but now i have a new idea, which i'm not sure is possible.

Is there a way, to make a '' orb of vision '' follow the mouse, so that everything in that area gets visible?. Kind of like using a torch, to see a small area where your mouse is.

Orb of vision example

  • NOTE : I'm not asking for someone to code it for me, but rather a explanation, since i'm curious to learn it myself, but i do need a guide-line!**

function mouseMovement(e) {
  var x = document.getElementById('x_show');
  var y = document.getElementById('y_show');

  x.innerHTML = e.clientX;
  y.innerHTML = e.clientY;

  document.getElementById("followDiv").style.left = event.clientX - 15 + "px";
  document.getElementById("followDiv").style.top = event.clientY - 15 + "px";


}
document.onmousemove = mouseMovement;
#followDiv {
  background-color: lightblue;
  height: 30px;
  width: 30px;
  position: absolute;
}
<p id="x_show">0</p>
<p id="y_show">0</p>
<div id="followDiv"></div>
Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
Hendry
  • 87
  • 1
  • 9
  • 1
    Sure it's possible, but would be really easier with the canvas API. There are already some examples out there on SO. – Kaiido Feb 16 '17 at 23:24
  • 2
    [One "flashlight" example](http://stackoverflow.com/questions/32441576/html-canvas-spotlight-effect/32445002#32445002) – markE Feb 16 '17 at 23:29

3 Answers3

2

A non-canvas way would be :

  • Set page background to black
  • Round the borders of #followDiv using 'border-radius: 50%;'
  • Set the background of this div to image
  • Play with the background-position to move opposite to mouse

Edit:

  • A final touch by softening the edges using box-shadow

function mouseMovement(e) {
  var x = document.getElementById('x_show');
  var y = document.getElementById('y_show');

  x.innerHTML = e.clientX;
  y.innerHTML = e.clientY;

  var followDiv = document.getElementById("followDiv");
  followDiv.style.left = event.clientX - 60 + "px";
  followDiv.style.top = event.clientY - 60 + "px";
  followDiv.style.backgroundPositionX = (-event.clientX) + 'px';
  followDiv.style.backgroundPositionY = (-event.clientY) + 'px';





}
document.onmousemove = mouseMovement;
body {
  background: black;
}

#followDiv {
  background-color: lightblue;
  height: 120px;
  width: 120px;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 12px 12px black inset, /* workaround for a soft edge issue : 
               http://stackoverflow.com/a/37460870/5483521
            */
  0 0 2px 2px black inset, 0 0 2px 2px black inset, 0 0 2px 2px black inset;
  background: url(https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg) no-repeat;
}
<p id="x_show">0</p>
<p id="y_show">0</p>
<div id="followDiv"></div>
Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
Bulent Vural
  • 2,630
  • 1
  • 13
  • 18
  • Thanks! Never thought of the possibility to move the image! I did come up with something my self, i will show it in a different comment ,since i can't upload a snippet here. – Hendry Feb 16 '17 at 23:57
0

@Bulent Vural, this was my solution. But i can't get the circle ' smaller ' since i have to re-size it to fit the screen, which won't work with %'s.

The only way this works, is adding alot of " black, black, black ". Which isn't very pleasing. 

    function mouseMovement(e)
    {
        var x = document.getElementById('x_show');
        var y = document.getElementById('y_show');

        x.innerHTML = e.clientX;
        y.innerHTML = e.clientY;

        document.getElementById("followDiv").style.left = event.clientX-2000+"px";
        document.getElementById("followDiv").style.top = event.clientY-2000+"px";






    }
    document.onmousemove = mouseMovement;
</script>
 html, body {margin: 0; height: 100%; overflow: hidden}
        #followDiv {
            /* background-color: lightblue; */
            height: 4000px;
            width: 4000px;
            position: absolute;

            background: -webkit-radial-gradient(circle, rgba(248, 255, 252, 0),black);
            background: -o-radial-gradient(circle, rgba(248, 255, 252, 0),black);
            background: -moz-radial-gradient(circle, rgba(248, 255, 252, 0),black);
            background: radial-gradient(circle, rgba(248, 255, 252, 0),black);
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  
</head>
<body>
  <p id="x_show">0</p>
  <p id="y_show">0</p>
  <div id="followDiv"></div>
</body>
Hendry
  • 87
  • 1
  • 9
  • For ligthing effect, what about having a white circle with soft edges? I'll demonstrate the soft edge part on my answer. – Bulent Vural Feb 17 '17 at 00:14
  • @BulentVural Indeed! i just tried something with adding a image, that has a transparant center! I think i might get this working, i'll be waiting on your example too. – Hendry Feb 17 '17 at 00:22
-1

i think this could help you what you want.

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

$("#canvas").mousemove(function(e){handleMouseMove(e);});

var radius=30;

var img=new Image();
img.onload=function(){
  draw(150,150,30);
}
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg'


function draw(cx,cy,radius){
  ctx.save();
  ctx.clearRect(0,0,cw,ch);
  var radialGradient = ctx.createRadialGradient(cx, cy, 1, cx, cy, radius);
  radialGradient.addColorStop(0, 'rgba(0,0,0,1)');
  radialGradient.addColorStop(.65, 'rgba(0,0,0,1)');
  radialGradient.addColorStop(1, 'rgba(0,0,0,0)');
  ctx.beginPath();
  ctx.arc(cx,cy,radius,0,Math.PI*2);
  ctx.fillStyle=radialGradient;
  ctx.fill();
  ctx.globalCompositeOperation='source-atop';
  ctx.drawImage(img,0,0);
  ctx.globalCompositeOperation='destination-over';
  ctx.fillStyle='black';
  ctx.fillRect(0,0,cw,ch);
  ctx.restore();
}


function handleMouseMove(e){

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  draw(mouseX,mouseY,30);

}
body{ background-color: ivory; }
#canvas{border:1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move mouse to reveal image with "flashlight"</h4>
<canvas id="canvas" width=300 height=300></canvas>
Shaju
  • 192
  • 1
  • 13