ইন্টার‌্যাক্টিভ কন্টেন্ট প্রকাশ করা

CSS মাস্ক ও রেজিস্টার করা কাস্টম প্রপার্টির সাহায্যে আপনার সাইটে পারফর্ম্যান্ট, ইন্ট্যার‍্যাক্টিভ রিভিল এফেক্ট যোগ করুন। মাস্ক হিসেবে রেডিয়াল গ্রেডিয়েন্ট ব্যবহার করে এবং এর স্টপ ভ্যালু রেজিস্টার করে, আমরা মসৃণভাবে এন্ট্রি ও এক্সিট ট্রানজিশন করতে পারি, যেখানে ন্যূনতম JavaScript সহ ব্যবহারকারীর পয়েন্টার ফলো করা হয়।

প্রয়োগ

১. কাস্টম প্রপার্টি রেজিস্টার করুন

গ্রেডিয়েন্ট স্টপ ভ্যালুর মসৃণ ইন্টারপোলেশন চালু করতে, আপনাকে অবশ্যই @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. প্রোগ্রেসিভ এনহ্যান্সমেন্ট: UI-এর বেস স্টেট এমনভাবে ডিজাইন করুন যাতে রিভিল এফেক্ট ছাড়াই সেটি সম্পূর্ণ ফাংশনাল ও লেজিবল হয়। এটি তখনই উপযোগী যখন এফেক্টটি শুধুমাত্র ভিজ্যুয়াল ফ্লেয়ার যোগ করে এবং কন্টেন্ট পড়ার জন্য প্রয়োজনীয় নয়।