جزئیات محصول

     کاربران گرامی در این پروژه به شما پروژه کاربردی  با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر  پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه  های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد

من یک اسکریپت وب به اشتراک می‌گذارم که یک ایموجی با چشمانی که حرکت ماوس را دنبال می‌کنند نمایش می‌دهد. این برنامه نحوه دستکاری Document Object Model (DOM) با استفاده از جاوا اسکریپت را نشان می‌دهد. با مطالعه این اسکریپت، می‌توانید اصول دستکاری DOM را یاد بگیرید و ببینید چگونه جاوا اسکریپت می‌تواند برای ایجاد عناصر تعاملی وب استفاده شود.

اگر به یادگیری نحوه ایجاد برنامه‌های ساده وب با انیمیشن‌هایی که توسط حرکت ماوس ایجاد می‌شوند علاقه‌مند هستید، این کد منبع می‌تواند بسیار مفید باشد. این یک مثال عملی از نحوه پیاده‌سازی ویژگی‌های تعاملی ارائه می‌دهد و صفحات وب شما را جذاب‌تر و پویا تر می‌کند.

مفاهیم کلیدی در ایجاد چشم‌های متحرک با حرکت ماوس در EF Core عبارتند از:

- انتخاب عنصر body و افزودن یک شنونده رویداد mousemove برای تحریک تابع eyeball.

- تعریف تابع eyeball که چشم‌ها را بر اساس موقعیت ماوس حرکت می‌دهد.

- انتخاب تمام عناصر با کلاس "eye".

- محاسبه مختصات مرکزی عنصر چشم.

- محاسبه زاویه بین موقعیت ماوس و مرکز چشم.

- تبدیل زاویه به درجه برای چرخش CSS.

- اعمال تحول چرخش به عنصر چشم.

ساختار کد

ایجاد چشم‌های متحرک با حرکت ماوس در EF Core یک فرآیند ساده است. ابتدا عنصر body را انتخاب کرده و یک شنونده رویداد mousemove برای تحریک تابع eyeball اضافه می‌کنیم. این تابع مسئول حرکت چشم‌ها بر اساس موقعیت ماوس است.

برای دستیابی به این هدف، همه عناصر با کلاس "eye" را انتخاب کرده و هر یک را بررسی می‌کنیم. برای هر عنصر چشم، مختصات مرکزی آن را محاسبه کرده و زاویه بین موقعیت ماوس و مرکز چشم را تعیین می‌کنیم. سپس این زاویه را به درجه برای چرخش CSS تبدیل کرده و تحول چرخش را به عنصر چشم اعمال می‌کنیم، به طوری که به نظر برسد چشم‌ها حرکت ماوس را دنبال می‌کنند.

در اینجا کد جاوا اسکریپتی که ایجاد کرده‌ام تا چشم‌های ایموجی مکان ماوس را دنبال کنند:

```javascript

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

function eyeball() {

let eyes = document.querySelectorAll(".eye");

eyes.forEach((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 rotate = radian * (180 / Math.PI) * -1 + 270;

eye.style.transform = `rotate(${rotate}deg)`;

});

}

```

همین! امیدوارم این کد حرکت چشم‌ها با حرکت ماوس با استفاده از HTML، CSS و JavaScript به شما در دستیابی به چیزی که به دنبال آن هستید کمک کند و در پروژه‌های کنونی و آینده‌تان مفید باشد.

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