‏استایل مرزآگاه در CSS با تابع view()

نویسنده تو این مقاله نشون می‌ده که چطور می‌شه به عنصرها بر اساس اینکه چقدر به لبهٔ ظرف یا صفحه نزدیک‌ن استایل متفاوت داد — رنگ، اندازه یا چرخش مختلف — اون هم فقط با یه تابع CSS و بدون کلاس‌گذاری یا شمردن آیتم‌ها.

ترفند اصلی، تابع view() هست. این تابع معمولاً برای انیمیشن‌های وابسته به اسکرول به کار می‌ره و پیشرفت انیمیشن رو به میزان دیده‌شدن عنصر تو ظرف اسکرولش گره می‌زنه: صفر درصد وقتی لبهٔ ابتدایی عنصر وارد کادر دید می‌شه و صد درصد وقتی لبهٔ انتهاییش از سمت مقابل خارج می‌شه. نکتهٔ نویسنده اینه که می‌شه از همین تابع بدون هیچ اسکرول واقعی‌ای استفاده کرد.

برای مثال، چند تا کارت تو یه گرید سه‌ستونه داریم. اول والدشون رو با overflow: hidden به یه ظرف اسکرول تبدیل می‌کنیم، بعد یه انیمیشن @keyframes که مثلاً hue-rotate رو تغییر می‌ده روی کارت‌ها می‌ذاریم و تایم‌لاینش رو view(x) قرار می‌دیم که x محور افقیه:

.card {
  background: rgb(16, 111, 235);
  animation: cr;
  animation-timeline: view(x);
}

حالا رنگ هر کارت بسته به جای افقیش تو ظرف فرق می‌کنه، بدون اینکه اسکرولی در کار باشه.

همین اصل روی عنصرهای درگ‌شونده هم جواب می‌ده؛ وقتی یه باکس رو با جاوااسکریپت تو صفحه جابه‌جا می‌کنی، چون موقعیتش نسبت به ظرف اسکرول پیش‌فرض عوض می‌شه، رنگش هم عوض می‌شه. نویسنده همین ایده رو روی اسلایدرهای HTML هم پیاده می‌کنه: تراک اسلایدر رو با overflow: hidden به ظرف اسکرول تبدیل می‌کنه و view(x) رو روی thumb می‌ذاره تا رنگش بین لبه‌ها و وسط تغییر کنه.

به گفتهٔ نویسنده، با بازی‌کردن با محورها، بازهٔ انیمیشن و تعداد استپ‌ها می‌شه نتیجه‌های مختلفی گرفت؛ فقط باید حواست باشه که با استفاده از overflow، جد درست به‌عنوان ظرف اسکرول تنظیم بشه.

نکات کلیدی:

• تابع view() رو می‌شه بدون هیچ اسکرول واقعی‌ای برای استایل‌دهی مرزآگاه به کار برد
• کافیه والد با overflow به ظرف اسکرول تبدیل بشه و animation-timeline: view(x) روی عنصر بشینه
• بدون کلاس‌گذاری، شمردن آیتم یا موقعیت هم‌نیایی، فقط با CSS
• روی کارت‌های ثابت، باکس‌های درگ‌شونده و thumb اسلایدرها جواب می‌ده