Question 180575 in Html Question posted in
Some basic documentation can be found here.

Html – See through an absolute div on mouse move

I’m trying to create some kind of flashlight effect. I have a div (fixed, radiant background, height and width 100%) masking the entire screen. On mouse move, I’d like to reveal what is behind the div in a flashlight way.

I don’t find a way to make a portion of this div transparent (opacity: 0). See example attached:

enter image description here

The "Pré-inscription" button appears on mouse over, the gradiant remains around the mouse cursor (the circle is too small on the screenshot, I will make it bigger)

Any idea?
Thanks

Axel

Tags:

2

Answers


  1. 0

    You could try something with an overlay with an inset shadow which tracks the mouse location.

    document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
  var eventDoc, doc, body;

  eventDoc = (event.target && event.target.ownerDocument) || document;
  doc = eventDoc.documentElement;
  body = eventDoc.body;

  event.pageX = event.clientX +
    (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
    (doc && doc.clientLeft || body && body.clientLeft || 0);
  event.pageY = event.clientY +
    (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
    (doc && doc.clientTop  || body && body.clientTop  || 0 );

  const spotlight = document.getElementById("spotlight");
  const boundingRect = spotlight.getBoundingClientRect();
  spotlight.style.left = `${event.pageX - boundingRect.width/2}px`
  spotlight.style.top = `${event.pageY - boundingRect.height/2}px`
}
    html, body {
  margin: 0;
}

.bigoverlay {
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

.spotlight {
  border-radius: 50%;
  width: 250vmax;
  height: 250vmax;
  box-shadow: 0 0 5vmax 110vmax inset black;
  position: absolute;
  z-index: -1;
  left: -75vmax;
  top: -75vmax;
}
    <div class="bigoverlay" id="bigoverlay">
  <div class="spotlight" id="spotlight"></div>  
</div>
    Login or Signup to reply.
  2. 0

    To create a flashlight effect that reveals content behind a div on mouse move, you can use CSS and JavaScript. Here’s an example

    document.addEventListener('mousemove',
  function(event) {
    var flashlight =
      document.querySelector('.flashlight');
    var x = event.clientX;
    var y = event.clientY;
    var radius = 100;
    flashlight.style.backgroundPosition =
      x + 'px ' + y + 'px';
    flashlight.style.backgroundSize =
      radius + 'px ' + radius + 'px';
  });
    .flashlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radialgradient(circle, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
  z-index: 9999;
}
    Add this kind of html

<div class="flashlight"></div>

    In this code, we have a fixed div with the class "flashlight" that covers the entire screen. It has a radial gradient background that starts with a dark color (rgba(0, 0, 0, 0.8)) and transitions to transparent, creating a flashlight effect.

    We use JavaScript to listen for the mousemove event on the document. On each mouse move, we update the background position of the div to match the mouse coordinates (x, y). This makes the center of the flashlight follow the mouse cursor. We also set the size of the background to create the desired radius for the flashlight effect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search