موش عالی 🤩! – انجمن DEV

امروز به طور کامل به شما خواهم گفت که چگونه این را درست کردم:

بنابراین همانطور که می بینید. من به شما خواهم گفت که چگونه یک تریلر موس بسازید

راه اندازی اولیه

ساختن نوار ناوبری بسیار ساده است، معمولاً نوارهای ناوبری را با پس زمینه نمی بینیم. آنها به طور کلی دارای پس زمینه شفاف هستند. اما من از یکی از وب سایت هایی که اخیرا دیدم الهام گرفتم و باید آن را بازسازی کنم. من با داشتن یک اندازه خوب شروع کردم. چون باید بی نقص به نظر برسد نه کم. سپس به آن رنگ های پر جنب و جوش دادم که پاپ می کنند. دوج آبی و زرد جفت خوبی بود. بعد آیکون ها را از font awesome دریافت کردم. تراز آنها به آنها رنگ و جلوه شناور داد. فکر می‌کردم خیلی خوب می‌شود اگر یک دسته افکت‌های دیگر مانند تغییرات پس‌زمینه زمانی که روی چیزی شناور می‌کنیم، قرار دهم. این تنظیمات اولیه بود

موش

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

نکته: من همیشه چیزها را با یک کد اصلی متمرکز می کنم:

display: flex;
align-items: center;
justify-content: center;

/* If you want them to be on top of each other */

flex-direction: column;

من فقط آن کد را به دلایلی ترجیح می دهم

سپس موقعیت تریلر را ثابت می گذارم تا ثابت شود 🙄. من z-index را روی چیزی بزرگ تنظیم کردم. لایک 99999999999999999999999999999999.

نکته مهم دیگر این است که بالا و سمت چپ را روی 0 قرار دهید. با این کار ماوس ما که دنبال ماوس خواهد بود آماده می شود.

فالو کن 🚶‍♂️

فقط این کد را وارد کنید

var trailer = document.getElementById("trailer");
window.onmousemove = (e) => {
  document.getElementById("trailer").style.scale = "1";
  const y = e.clientX + 20;
  const x = e.clientY + 20;

  const keyframes = {
    transform: "translate(" + y + "px" + "," + x + "px)"
  };

  document.getElementById("trailer").animate(keyframes, {
    duration: 800,
    fill: "forwards"
  });
};

اکنون کاری که این کد انجام می دهد اساساً نظارت بر حرکت ماوس و سپس ذخیره آن است. سپس 20 را به مقدار اضافه می کنیم و آن را به عنوان موقعیت x و y تریلر در قالب یک انیمیشن قرار می دهیم. ما می توانیم این کار را اساسا انجام دهیم، اما آنقدرها هم صاف و آرامبخش نیست. اگر می خواهید صاف باشد. شما باید از انیمیشن ها استفاده کنید. این تمام است اگر دستورالعمل های من را دنبال کنید، باید چیزی برای دنبال کردن ماوس خود دریافت کنید.

بچه ها الان میخوام یه چیزی بپرسم که بعدش چی بگم!