Search code examples
javascripthtmlcssclip-path

Let link follow clippath

I am trying to figure out how to display a clickable link only inside the area of the existing clip-path. And also utilize the existing OffsetX value.

<style>
.mouse {
  background-color: aqua;
}
              
.img {
  background-color: black;
}
</style>
            
<div class="wrap">
  <div class="img"></div>
  <div class="mouse">
    <p id="anchor"></p>
  </div>    
</div>
             
<script>
let main = document.querySelector('.wrap');
let mouse = document.querySelector('.mouse');
let text = "Text link";
let result = text.link("www.stackoverflow.com");
document.getElementById("anchor").innerHTML = result;
 
main.addEventListener('mousemove', (e) => {
  mouse.style.clipPath = `circle(15em at ${e.offsetX}px`; 
});
</script>
Solution

  • If I understand you correctly, you want the link to move along with the clip path.

    I would do it by so:

    mouse.style.clipPath = `circle(5em at ${(e.clientX - main.getBoundingClientRect().x)}px`; 
document.getElementById("anchor").style = "margin-left: " + (e.clientX - main.getBoundingClientRect().x) + "px";

    This does not utilize the offsetX, but as you move the link, the offsetX would also move along (so it would stay the same), unless you disable pointer events for the link (which might not be intented).