How to make the picture not spin, but be in the same position when tracking the mouse movement

Issue

How to make the picture not spin, but be in the same position when tracking the mouse movement. Or maybe I need to write the code in a different way? I’ve already tried many options, but since I’m just learning JS, I don’t know in which direction to move. An example where the picture is not spinning link . I will be grateful for your help.

Here is my code:

document.querySelector("body").addEventListener("mousemove", eyeball);

function eyeball() {
  const eye = document.querySelectorAll(".eye");
  eye.forEach(function(eye) {
    let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
    let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);

    let radian = Math.atan2(event.pageX - x, event.pageY - y);
    let rotation = (radian * (180 / Math.PI) * -1) + 270;
    eye.style.transform = "rotate(" + rotation + "deg)"
  });
}
.contact {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.box {
  display: flex;
  margin: 0;
  top: 35px;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  align-items: center;
  justify-content: center;
}

.box .eye {
  position: relative;
  width: 200px;
  height: 200px;
  display: block;
  background-color: pink;
  border-radius: 50%;
  z-index: -1;
}

.box .eye::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 35px;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-image: url(https://cdn-icons-png.flaticon.com/512/179/179531.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
}
<section class="contact">
  <div class="box">
    <div class="eye"></div>
  </div>
</section>

Solution

On the web site you included the eye isn’t really tracing a circle shape, it’s bounded by a rectangle representing scaled screen dimensions.

document.querySelector("body").addEventListener("mousemove", eyeball);

function eyeball() {
  const pupils = document.querySelectorAll(".pupil");
  pupils.forEach((pupil) => {
    const mx = event.pageX
    const my = event.pageY
    // scale mouse position from screen space to percentages 15% - 85%
    const vx = scale(mx, 0, innerWidth, 15, 85)
    const vy = scale(my, 0, innerHeight, 15, 85)
    pupil.style.transform = `translate(${vx}%, ${vy}%)`
  });
}

// scales value from inMin - inMax range to outMin - outMax range
function scale(value, inMin, inMax, outMin, outMax) {
  const percent = (value - inMin) / (inMax - inMin);
  const out = percent * (outMax - outMin) + outMin;
  return out
}
.contact {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.box {
  display: flex;
  margin: 0;
  top: 35px;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  align-items: center;
  justify-content: center;
}

.box .eye {
  position: relative;
  width: 200px;
  height: 200px;
  display: block;
  background-color: pink;
  border-radius: 50%;
  z-index: -1;
}

.box .eye .pupil {
  width: 100px;
  height: 100px;
  background-image: url(https://cdn-icons-png.flaticon.com/512/179/179531.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
}
<section class="contact">
  <div class="box">
    <div class="eye">
      <div class="pupil"></div>
    </div>
  </div>
</section>

Answered By – Konrad

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published