پروژه‌ی ردیابی mouse با استفاده از JavaScript

امروز می‌خواهیم این مرغ زیبا را دنبال mouse خود کنیم! ما از JavaScript استفاده خواهیم کرد تا چشمان این جوجه هر کجا که mouse شما برود را دنبال کند.

ساختار HTML

ابتدا ذکر کنم که ما مرغ کامل را در CSS نمی‌سازیم، این برای یک مقاله دیگر است!

بنابراین بیایید تمرکز خود را بر این بگذاریم که چشم‌ها باید mouse را دنبال کنند.

<div class="eye eye-left">
  <div class="eye-inner"></div>
</div>
<div class="eye eye-right">
  <div class="eye-inner"></div>
</div>

این ساختار HTML برای چشم‌ها است، ما به یک لایه خارجی (قسمت سفید بیرونی) بیت چشم داخلی (لایه سیاه) نیاز خواهیم داشت و از یک شبه کلاس برای دادن مردمک چشم (سفید) استفاده خواهیم کرد.

CSS

در مورد CSS بیایید با لایه اصلی سفید شروع کنیم:

.eye {
  display: flex;
  width: 48px;
  height: 48px;
  position: absolute;
  bottom: 41px;
  background: #fff;
  border-radius: 50%;
  &-left {
    left: 26px;
  }
  &-right {
    right: 26px;
  }
}

یک شکل گرد به دلیل شعاع حاشیه 50٪ و پس زمینه سفید.

حالا بیایید به قسمت داخلی سیاه برویم:

.eye {
  &-inner {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: black;
    border-radius: 50%;
    margin-left: 4px;
    margin-top: 4px;
  }
}

همانطور که مشاهده می‌کنید، قسمت سیاه و سفید کمی از لایه اصلی ما کوچک‌تر است.

آخرین قسمت مردمک چشم:

.eye {
  &-inner {
    &:after {
      position: absolute;
      top: 2px;
      left: 10px;
      width: 20px;
      height: 20px;
      background: white;
      border-radius: 50%;
      content: ' ';
    }
  }
}

می‌بینید که خیلی کوچک‌تر است و ما برای شروع آن را در مرکز بالا قرار می‌دهیم.

در JavaScript چشم‌ها mouse را دنبال می‌کنند

برای اینکه چشم‌ها از mouse پیروی کنند، ما جابجایی mouse را از روی چشم محاسبه خواهیم کرد. سپس یک چرخش بر روی div چشم اضافه خواهیم کرد. از آنجا که ما از یک div استفاده می‌کنیم، این چرخش به دور محور خودش می‌چرخد و به نظر می‌رسد دنباله mouse شما است.

ابتدا باید حرکت mouse را تشخیص دهیم:

const container = document.querySelector('.container');
container.addEventListener('mousemove', e => {
  // Ok mouse is moving!
});

وقتی این اتفاق افتاد، بیایید هر دو چشم را بگیریم و روی آن‌ها حلقه بزنیم.

const eyes = document.querySelectorAll('.eye');

[].forEach.call(eyes, function(eye) {});

عالی است، اکنون ما نیاز به انجام برخی محاسبات داریم. بنابراین بیایید کد نهایی را با چند نظر بررسی کنیم:

const container = document.querySelector('.container');
container.addEventListener('mousemove', e => {
  const eyes = document.querySelectorAll('.eye');
  [].forEach.call(eyes, function(eye) {
    // Get the mouse position on the horizontal axis
    let mouseX = eye.getBoundingClientRect().right;
    // If it's the left eye we need the left offset instead the right
    if (eye.classList.contains('eye-left')) {
      mouseX = eye.getBoundingClientRect().left;
    }
    // Now we also need the vertical offset
    let mouseY = eye.getBoundingClientRect().top;
    // Now we are going to calculate the radian value of the offset between the mouse and the eye
    let radianDegrees = Math.atan2(e.pageX - mouseX, e.pageY - mouseY);
    // Let's convert this into a degree based value so we can use it in CSS
    let rotationDegrees = radianDegrees * (180 / Math.PI) * -1 + 180;
    // Now all we have to do is add this degrees to our eye!
    eye.style.transform = `rotate(${rotationDegrees}deg)`;
  });
});

بفرمایید، یک ردیاب mouse برای جوجه کوچک زیبا!

ممنون که در این مقاله ما را همراهی کردید. در صورت تمایل نظرات خود را در بخش زیر با ما در میان بگذارید.

منبع