इंटरैक्टिव कॉन्टेंट दिखाना

सीएसएस मास्क और रजिस्टर की गई कस्टम प्रॉपर्टी की मदद से, अपनी साइट पर बेहतर परफ़ॉर्मेंस वाले और इंटरैक्टिव रिवील इफ़ेक्ट जोड़ें. मास्क के तौर पर रेडियल ग्रेडिएंट का इस्तेमाल करके और उसकी स्टॉप वैल्यू को रजिस्टर करके, हम एंट्री और एग्ज़िट को आसानी से ट्रांज़िशन कर सकते हैं. साथ ही, कम से कम 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 की मदद से निर्देशांक अपडेट करना

पॉइंटर की पोज़िशन ट्रैक करें और सीएसएस वैरिएबल अपडेट करें. प्रॉपर्टी रजिस्टर होने और 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. सुलभता और इंटरैक्शन

सुलभता की ज़रूरी गारंटी: यह पैटर्न, विज़ुअल स्पॉटलाइट दिखाने के लिए पॉइंटर इंटरैक्शन पर निर्भर करता है. आपको यह पक्का करना होगा कि बैकग्राउंड में मौजूद सारा कॉन्टेंट पूरी तरह से दिखता रहे, पढ़ा जा सके, और डिफ़ॉल्ट रूप से कीबोर्ड से ऐक्सेस किया जा सके. इसके लिए, स्पॉटलाइट लेयर का इस्तेमाल सिर्फ़ पॉइंटर का इस्तेमाल करने वाले लोगों के लिए, विज़ुअल को बेहतर बनाने के लिए किया जाना चाहिए. इस इफ़ेक्ट का इस्तेमाल, सिर्फ़ कीबोर्ड या सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोगों से ज़रूरी कॉन्टेंट को छिपाने या उसे ऐक्सेस करने से रोकने के लिए कभी न करें.

• पॉइंटर इवेंट: मास्क ओवरले लेयर पर pointer-events: none सेट करें, ताकि स्टैंडर्ड क्लिक और टच इंटरैक्शन, नीचे मौजूद कंट्रोल तक पहुंच सकें.
• Reduced Motion Override: कम मोशन का अनुरोध करने वाले उपयोगकर्ताओं के लिए, स्मूद ट्रांज़िशन इंटरपोलेशन को बंद करें.

/* 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%)
  );
}

मास्क की सुविधा

ऐसे ब्राउज़र के लिए जो सीएसएस मास्किंग के साथ काम नहीं करते:

1. प्रीफ़िक्स वाली प्रॉपर्टी: ज़्यादा ब्राउज़र पर काम करने के लिए, -webkit-mask-image प्रीफ़िक्स वाली प्रॉपर्टी का इस्तेमाल करें.
2. परतदार वृद्धि: यूज़र इंटरफ़ेस (यूआई) की बेस स्टेट को इस तरह डिज़ाइन करें कि वह पूरी तरह से काम करे और बिना किसी रिवील इफ़ेक्ट के भी साफ़ तौर पर दिखे. यह तब काम आता है, जब इफ़ेक्ट सिर्फ़ विज़ुअल को बेहतर बनाने के लिए इस्तेमाल किया जाता है और कॉन्टेंट को पढ़ने के लिए ज़रूरी नहीं होता.