Question

0

397

Views

Javascript rotate triangular clip path according to cursor position

I need to create a clip-path triangle and one of its vertices need to be anchored in the center, and its shape rotates according to the movement of the cursor to form a kind of flashlight, but I am stuck with forming triangular with sides of the equal length and stretching it out to the edges of the screen. Also it's area tends to zero as moving to the middle of top/bottom side of the screen Here is my code:

<div class="container">
   some lorem ipsum here
</div>

/* css */
body{
    box-sizing: border-box;
    margin:0;
    padding:0;
    height: 100vh;
    width:100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aliceblue;
    
}
.container{
    font-size: 2rem;
    clip-path: polygon(50% 50%,30% 100%,70% 100%);
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}

//js
let container = document.querySelector(".container");
window.addEventListener("mousemove", (e) => {
  console.log(
    Math.round((e.pageX / window.innerWidth) * 100),
    Math.round((e.pageY / window.innerHeight) * 100)
  );

  const x = Math.round((e.pageX / window.innerWidth) * 100);
  const y = Math.round((e.pageY / window.innerHeight) * 100);
  container.style.clipPath = `polygon(50% 50%,${x}% ${y - 10}%,${x}% ${y + 10}%)`;
});

Here is what I want to get, but using clip-path so I could see only the content which is cliped:

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T05:46:13.852Z

My math is probably rusty, but something like this may work for you:

var container = document.querySelector(".container");
var rayRadius = 0.3; /* Pi radians */
window.addEventListener("mousemove", (e) => {
  let katX = window.innerWidth/2 - e.pageX;
  let katY = window.innerHeight/2 - e.pageY;
  let atan = Math.atan( katX/katY );
  let ray1angle = atan + rayRadius;
  let ray2angle = atan - rayRadius;
  let cover = Math.max(window.innerWidth, window.innerHeight);
  let ray1x = window.innerWidth/2 - Math.sign(katY)*Math.sign(ray1angle)*cover;
  let ray1y = window.innerHeight/2 - Math.sign(katY)*1/Math.tan(ray1angle) * Math.sign(ray1angle)*cover;
  let ray2x = window.innerWidth/2 - Math.sign(katY)*Math.sign(ray2angle)*cover;
  let ray2y = window.innerHeight/2 - Math.sign(katY)*1/Math.tan(ray2angle) * Math.sign(ray2angle)*cover;
  container.style.clipPath = `polygon(50% 50%,${ray1x}px ${ray1y}px,${ray2x}px ${ray2y}px)`;
});

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aliceblue;

}

.container {
  background: rebeccapurple;
  font-size: 2rem;
  clip-path: polygon(50% 50%, 30% 100%, 70% 100%);
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

<div class="container">
  some lorem ipsum here
</div>

Also on JS Fiddle.

0

397

Javascript rotate triangular clip path according to cursor position

1 answers

0

Find remote jobs

Andres GPT