ایجاد علاقه بصری: نحوه استفاده از MouseMove Hover برای نشان دادن تصاویر پس زمینه

Canva 15 میلیارد طرح را در 15 فوریه 2023 بر روی پلتفرم خود جشن گرفت و نقطه عطف بزرگی را برای این شرکت رقم زد. برای جشن گرفتن این رویداد، این شرکت یک تصویر پس‌زمینه ویژه ایجاد کرد که شامل طرح‌های ساخته شده روی پلتفرم است. هنگامی که ماوس خود را در اطراف صفحه حرکت می دهید، تصویر نمایان می شود و جلوه جالبی ایجاد می کند. آن را جالب دیدم و تصمیم گرفتم آن را با استفاده از HTML، CSS و جاوا اسکریپت بازسازی کنم. این مقاله به شما نشان می دهد که چگونه افکت را مرحله به مرحله بازسازی کنید.

پیش نیازها

این مقاله فرض می کند که شما دانش پایه ای از HTML، CSS و جاوا اسکریپت دارید. همچنین به یک ویرایشگر کد و یک مرورگر وب نیاز دارید. من از VS Code و Chrome استفاده خواهم کرد، اما شما می توانید از هر چیزی که دوست دارید استفاده کنید.

برای دنبال کردن، فایل های شروع را از اینجا کلون یا دانلود کنید

شروع شدن

ابتدا نشانه گذاری HTML برای ظرف و تصویر پس زمینه ایجاد کنید. ظرف جایی است که تصویر پس‌زمینه در حالت شناور نشان داده می‌شود.

<div class="container">
  <h1>Thanks for <u>15 billion designs!</u></h1>
  <input type="text" placeholder="Search your content or Canva's" />
  <div class="hover"></div>
</div>

ظرف جایی است که تمام محتوا در آن قرار خواهد گرفت. را hover div فعلا خالی است، اما تصویر پس زمینه را با استفاده از CSS اضافه می کنیم.

حالت دادن به ظرف

سپس CSS زیر را در قسمت کپی کنید styles.css فایل. با این کار به ظرف و سایر عناصر موجود در برنامه استایل می دهید.

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
  width: 100%;
  height: 25rem;
  background: linear-gradient(
    119.42deg,
    #cc00c4 8.94%,
    #7d2ae8 54.02%,
    #00c4cc 95.49%
  );
  border-radius: 8px;
  text-align: center;
  padding: 0.5rem;
  overflow: hidden;
}

h1 {
  color: #fff;
  font-size: 3rem;
  position: relative;
  z-index: 10;
  margin-top: 1rem;
}

input {
  position: relative;
  margin-top: 2rem;
  padding: 9px 4px 9px 40px;
  border: 1px solid #2b3b4a4d;
  outline: none;
  color: #0d1216;
  padding: 0 12px;
  font-size: 1rem;
  border-radius: 4px;
  height: 2.5rem;
  width: 40rem;
  max-width: 100%;
  z-index: 10;
}

در CSS بالا، کانتینر را روی قرار می دهیم position: relative تا بتوانیم تصویر پس زمینه را درون آن قرار دهیم. ما همچنین تنظیم کردیم overflow دارایی به hidden به طوری که تصویر پس زمینه از ظرف سرریز نشود.

ما همچنین تنظیم کردیم z-index دارایی از h1 و input عناصر به 10 به طوری که در بالا یا بالای تصویر پس زمینه ظاهر شوند.

این چیزی است که ما تا کنون داریم:

اضافه کردن تصویر پس زمینه

بعد، ما را هدف قرار می دهیم .hover کلاس و تصویر پس زمینه را اضافه کنید. ما همچنین تنظیم می کنیم position دارایی به absolute تا بتوانیم تصویر را در داخل ظرف قرار دهیم.

CSS زیر را در قسمت زیر کپی کنید styles.css فایل:

.hover {
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  width: 10rem;
  height: 10rem;
  background: url(img/giphy.gif) 50% 50% fixed;
  border-radius: 50%;
  box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.15);
  filter: blur(1px);
  z-index: 5;
}

را opacity دارایی تنظیم شده است 0 به طوری که تصویر به طور پیش فرض مخفی می شود. ما از جاوا اسکریپت برای تغییر opacity به استفاده می کنیم 1 هنگامی که کاربر روی ظرف شناور می شود.

علاوه بر این، برای background ویژگی، ما از نحو مختصر برای تنظیم تصویر پس زمینه، موقعیت، اندازه و تکرار استفاده کردیم. ما همچنین تنظیم کردیم fixed ارزش برای background-attachment خاصیت به طوری که تصویر در جای خود باقی بماند زمانی که ماوس به اطراف حرکت می کند.

اگر ترجیح می دهید، می توانید از نحو طولانی برای تنظیم تصویر پس زمینه، موقعیت، اندازه و تکرار استفاده کنید:

background-image: url(img/giphy.gif);
background-position: 50% 50%;
background-attachment: fixed;

فاش کردن تصویر پس زمینه

برای آشکار کردن تصویر پس‌زمینه، از جاوا اسکریپت برای ردیابی حرکت مکان‌نمای ماوس کاربر و تغییر شفافیت تصویر پس‌زمینه استفاده می‌کنیم.

یک فایل جدید به نام ایجاد کنید app.js و کد زیر را اضافه کنید:

const hover = document.querySelector(".hover");
const hoverWHalf = hover.offsetWidth / 1.5;
const container = document.querySelector(".container");

container.addEventListener("mousemove", (e) => {
  hover.style.left = e.pageX - hoverWHalf + "px";
  hover.style.top = e.pageY - hoverWHalf + "px";
  hover.style.opacity = "1";
});

در کد بالا ابتدا عبارت را انتخاب می کنیم .hover و .container عناصر با استفاده از querySelector روش.

سپس، شنونده رویداد را به عنصر ظرف اضافه می کنیم. شنونده رویداد به آن گوش می دهد mousemove رویداد، به طوری که هر زمان که کاربر ماوس خود را روی کانتینر حرکت دهد، کد موقعیت آن را محاسبه می کند .hover عنصر و به روز رسانی آن position و opacity به صورت پویا

به طور خاص، نقطه میانی افقی و عمودی را محاسبه می کند .hover عنصر با استفاده از offsetWidth ویژگی و سپس نیمی از این مقدار را از مقدار کم می کند pageX و pageY ویژگی های رویداد mousemove برای تعیین موقعیت عنصر .hover نسبت به مکان نما ماوس.

فراموش نکنید که لینک app.js فایل داخل index.html فایل ؛)

<script src="app.js"></script>

با این کار، ما با موفقیت افکت شناور موس را ایجاد کردیم. این نتیجه نهایی است:

نسخه نمایشی زنده و کد منبع را در Github بررسی کنید.

نتیجه

و شما آن را دارید! شما به پایان این مقاله در مورد ایجاد علاقه بصری با استفاده از افکت شناور MouseMove با HTML، CSS و جاوا اسکریپت رسیده اید. در حال حاضر، شما باید درک خوبی از نحوه استفاده از این تکنیک برای افزودن کمی هیجان و خلاقیت به وب سایت خود داشته باشید.

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

همانطور که به توسعه مهارت های طراحی وب خود ادامه می دهید، حتماً مراقب روندهای جدید و هیجان انگیز در صنعت باشید. چه کسی می داند، شما ممکن است چیز بزرگ بعدی را کشف کنید 🙂

با تشکر از شما برای خواندن! امیدوارم این مقاله برای شما مفید بوده باشد. اگر دوست داشتید لایک کنید و با دوستان و همکاران خود به اشتراک بگذارید 🙂

من دوست دارم با شما در ارتباط باشم توییتر | لینکدین | Github | نمونه کارها.

منابع