الكشف عن المحتوى التفاعلي

يمكنك إضافة تأثيرات كشف تفاعلية وفعّالة إلى موقعك الإلكتروني باستخدام أقنعة CSS والخصائص المخصّصة المسجّلة. باستخدام تدرج شعاعي كقناع وتسجيل قيم الإيقاف، يمكننا الانتقال بسلاسة بين الدخول والخروج، مع تتبُّع مؤشر المستخدم باستخدام الحد الأدنى من JavaScript.

التنفيذ

1. تسجيل الخصائص المخصّصة

لتفعيل الاستكمال السلس لقيم نقاط توقّف التدرج، يجب تسجيل المتغيّرات باستخدام @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;
}

لا تحتاج الخصائص المخصّصة التي تتتبّع موضع المؤشر إلى الانتقال، لذا ليس من الضروري تسجيلها.

2. تحديد طبقة الإخفاء

طبِّق السمة 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;
}  

3- تعديل الإحداثيات باستخدام JavaScript

تتبَّع موضع المؤشر وعدِّل متغيّرات 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}%`);
});

4. أدوات تسهيل الاستخدام والتفاعل

ضمان إلزامي لتسهيل الاستخدام: يعتمد هذا النمط على تفاعلات المؤشر للكشف عن تسليط الضوء المرئي. يجب ضمان بقاء كل المحتوى الأساسي مرئيًا ومقروءًا بالكامل، ويمكن الوصول إليه بشكل مستقل باستخدام لوحة المفاتيح تلقائيًا في التنسيق الأساسي، وذلك باستخدام طبقة Spotlight فقط كتحسين مرئي غير أساسي لمستخدمي المؤشر. لا تستخدم هذا التأثير أبدًا لحجب المحتوى الأساسي أو حظره عن مستخدمي لوحة المفاتيح فقط أو مستخدمي التكنولوجيا المساعِدة.

• أحداث المؤشر: اضبط 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 masking على الإطلاق:

1. السمة التي تحمل بادئة: استخدِم السمة التي تحمل البادئة -webkit-mask-image لتوفير دعم أوسع للمتصفّحات.
2. التحسين التدريجي: صمِّم الحالة الأساسية لواجهة المستخدم لتكون فعّالة ومقروءة بالكامل بدون تأثير الكشف. ويكون ذلك مفيدًا عندما يضيف التأثير لمسة جمالية فقط، وليس شرطًا لقراءة المحتوى.