نمایش محتوای تعاملی

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

پیاده‌سازی

۱. ثبت دارایی‌های سفارشی

برای فعال کردن درون‌یابی هموار مقادیر توقف گرادیان، باید متغیرها را بااستفاده از @property ثبت کنید. این کار نوع داده را به موتور مرورگر اطلاع می‌دهد و به آن اجازه می‌دهد درطول به‌روزرسانی‌ها بین مقادیر جابه‌جا شود.

/* Register the spotlight inner and outer sizes to enable interpolation */
 @property --inner-size{
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --outer-size{
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}

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

۲. تعریف کردن لایه پوشاننده

mask-image را روی عنصری که می‌خواهید آشکار شود اعمال کنید. از radial-gradient استفاده کنید که به دارایی‌های ثبت‌شده ارجاع می‌دهد.

.reveal-layer {
  /* Only transition the size properties, NOT the position variables */
  transition: --inner-size 0.2s ease-in-out, --outer-size 0.2s ease-in-out;  

  /* The spotlight is defined by the transparent center of the mask */
  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    black var(--inner-size, 0%),
    transparent var(--outer-size, 0%)
  );

  /* Ensure the mask doesn't repeat if the element is large */
  mask-repeat: no-repeat;

  /* Make the mask layer non-interactive */
  pointer-events: none;
}

/* Update the gradients stops on interaction */
.reveal-layer:hover {
  --inner-size: 100px;
  --outer-size: 120px;
}  

۳. به‌روزرسانی مختصات با جاوا اسکریپت

موقعیت اشاره‌گر را ردیابی کنید و متغیرهای CSS را به‌روز کنید. چون ویژگی‌ها ثبت شده‌اند و transition تعریف‌شده‌ای دارند، نورافکن حتی اگر رویدادهای اشاره‌گر نامتناوب باشند به‌آرامی حرکت خواهد کرد.

const container = document.querySelector('.container');
// Store the container's bounding rect
let rect = container.getBoundingClientRect();
// Update the rect when the container is resized
const resizeObserver = new ResizeObserver(()=>{
  rect = container.getBoundingClientRect();
})
resizeObserver.observe(container);

container.addEventListener('pointermove', (e) => {
  // Calculate position as a percentage of the container.
  const x = ((e.clientX - rect.left) / rect.width) * 100;
  const y = ((e.clientY - rect.top) / rect.height) * 100;

  // Update the registered properties
  container.style.setProperty('--mouse-x', `${x}%`);
  container.style.setProperty('--mouse-y', `${y}%`);
});

۴. دسترس‌پذیری و تعامل

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

• رویدادهای اشاره‌گر: pointer-events: none را روی لایه هم‌پوشانی ماسک تنظیم کنید تا تعامل‌های استاندارد کلیک و لمس بتوانند به کنترل‌های زیرین منتقل شوند.
• لغو کاهش حرکت: غیرفعال کردن درون‌یابی انتقال روان برای کاربرانی که درخواست کاهش حرکت دارند.

/* MANDATORY Copy-Paste Safety: Disable transition scaling for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  .reveal-layer {
    transition: none !important;
  }
}

راهبردهای جایگزین

جایگزین دارایی ثبت‌نشده

مرورگرهایی که از mask-image پشتیبانی می‌کنند اما از @property پشتیبانی نمی‌کنند همچنان نورافکن را نشان خواهند داد، اما حرکت بین حالت‌های روشن و خاموش خواهد پرید زیرا نمی‌توانند مقادیر را در radial-gradient درون‌یابی کنند. هنگام استفاده از var()، مقادیر جایگزین ارائه دهید.

.reveal-layer {
  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    /* Use fallback values when using the `var()` function for browsers that don't get an initial value from the @property registration. */
    black var(--inner-size, 0%),
    transparent var(--outer-size, 0%)
  );
}

پشتیبانی از ماسک پایه

برای مرورگرهایی که اصلاً از ماسک CSS پشتیبانی نمی‌کنند:

1. ویژگی پیشوندی: برای پشتیبانی گسترده‌تر مرورگر، از ویژگی پیشوندی -webkit-mask-image استفاده کنید.
2. ارتقای پیش‌رو: حالت پایه واسط کاربر را طوری طراحی کنید که بدون جلوه آشکارسازی کاملاً کاربردی و خوانا باشد. این ویژگی زمانی مفید است که جلوه فقط جذابیت بصری اضافه می‌کند و برای خواندن محتوا الزامی نیست.