‏scroll-mask؛ محوکردن لبه‌های اسکرول با CSS

تو این مطلب یه مجموعه یوتیلیتی به اسم scroll-mask برای Tailwind CSS v4 معرفی شده که کارش محوکردن تدریجی لبه‌های یه ناحیهٔ اسکرول‌شونده‌ست. به‌جای اینکه محتوا یهو زیر لبهٔ کانتینر قطع بشه، با mask-image و چند تا linear-gradient که با mask-composite: intersect روی هم ترکیب می‌شن، محتوا نرم محو می‌شه.

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

animation:
  scroll-mask-y-scroll linear,
  scroll-mask-x-scroll linear;
animation-timeline: scroll(self block), scroll(self inline);

کل این بخش داخل یه بلوک @supports (animation-timeline: scroll()) قرار گرفته، پس مرورگرهایی که انیمیشن اسکرول‌محور رو نمی‌شناسن اصلاً ماسکی نمی‌بینن و چیزی هم نمی‌شکنه.

سمت استفاده، scroll-mask-y برای سرریز عمودی و scroll-mask-x برای افقیه، و چهار یوتیلیتی جهت‌دار scroll-mask-t، -b، -l و -r هم هرکدوم فقط یه لبه رو محو می‌کنن. پیش‌فرض، محوشدگی از ۸۰٪ شروع می‌شه و با پسوند -from-* می‌شه جاشو عوض کرد؛ مقدارش موقعیت آخرین نقطهٔ کاملاً مات‌ه، یعنی from-90% یه ناحیهٔ محوشدگی ۱۰ درصدی کنار لبه می‌سازه. نویسنده می‌گه این پسوند رو عمداً شبیه خانوادهٔ mask-* خود تیلویند طراحی کرده.

نکات کلیدی:

• مجموعه یوتیلیتی CSS برای Tailwind v4 که لبه‌های ناحیهٔ اسکرول‌شونده رو محو می‌کنه، بدون جاوااسکریپت
• محوشدگی با animation-timeline: scroll(self ...) به موقعیت اسکرول گره خورده، پس هر لبه فقط وقتی محو می‌شه که محتوای مخفی داشته باشه
• ماسک از ترکیب چند linear-gradient با mask-composite: intersect ساخته می‌شه و متغیرهاش با @property تعریف شدن
• scroll-mask-x و scroll-mask-y برای محورها، و -t/-b/-l/-r برای تک‌لبه
• پسوند -from-* نقطهٔ شروع محوشدگی رو تنظیم می‌کنه؛ پیش‌فرض ۸۰٪
• همه‌چی داخل @supports هست، پس روی مرورگرهای قدیمی‌تر بی‌خطر غیرفعال می‌شه