‏گالری عکس با ستون‌هایی که با سرعت متفاوت اسکرول می‌شن، فقط با CSS

نویسنده می‌گه وقتی آدم داره یه گالری عکس رو می‌گرده، خیلی مهم نیست چیزها دقیقاً چطوری از جلوی چشمش رد می‌شن. پس می‌شه با اسکرول بازی کرد. ایده‌ی اولش این بود که دو ستون عکس با دو سرعت مختلف اسکرول بشن: ستون چپ عادی، ستون راست تندتر. خود اسکرول عوض نمی‌شه؛ ترفند اینه که یه transform عمودی روی ستون اعمال بشه که مقدارش با اسکرول تغییر می‌کنه.

پایه‌ی کار یه grid دوستونه‌ست که تو صفحه‌های کوچیک به یه ستون برمی‌گرده. نویسنده برای این breakpoint از @custom-media استفاده کرده، یعنی یه media query اسم‌دار مثل --small که LightningCSS اونو به CSS معمولی تبدیل می‌کنه.

بعد نوبت Scroll-Driven Animations می‌رسه، یعنی انیمیشن‌هایی که به جای زمان، با میزان اسکرول جلو می‌رن. اینجا از نوع scroll() استفاده شده که فقط یه عدد از میزان اسکرول کل صفحه می‌ده. ستون راست یه انیمیشن به اسم drift-up می‌گیره که روی کل صفحه اجرا می‌شه:

animation-name: drift-up;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: scroll(root block); /* the whole page */
animation-range: 0% 100%;

خود @keyframes drift-up ستون رو از translateY(12vh) به translateY(-20vh) می‌بره. نویسنده خودش می‌گه این عددها یه‌کم دلبخواهی‌ان و فقط حس خوبی دارن. کل این بخش داخل @supports (animation-timeline: scroll()) گذاشته شده چون همه‌ی مرورگرها این قابلیت رو ندارن؛ یعنی یه progressive enhancement هست و اگه پشتیبانی نشه گالری عادی کار می‌کنه. اگه حرکت زیاده، بهتره prefers-reduced-motion هم در نظر گرفته بشه.

به‌عنوان یه بونوس، هر عکس هم یه انیمیشن از نوع view() گرفته، یعنی انیمیشنی که به مسیر خود اون عنصر توی صفحه وصله. انیمیشن image-drift عکس رو از scale: 1.5 به 1 می‌رسونه و یه‌کم جابه‌جاش می‌کنه، در حالی که overflow: clip شکل قاب رو ثابت نگه می‌داره. عکس‌ها هم با popover باز می‌شن.

ایده‌ی دوم برعکس کردن اسکرول ستون راست بود: عکس‌ها از بالا پایین میان، حتی وقتی کاربر رو به پایین اسکرول می‌کنه. پایه همون انیمیشن translateY هست، ولی ستون اول اونقدر بالا کشیده می‌شه که آخرین عکس به پایین صفحه بچسبه، و بعد با sticky ثابت می‌شه. این کار انیمیشن‌های view() رو خراب می‌کنه، پس بزرگ‌نمایی هر عکس جداگانه از روی موقعیت اسکرول حساب شده. نویسنده اشاره می‌کنه که Codrops پنج سال پیش چیزی شبیه این رو با جاوااسکریپت ساخته بود.

نکات کلیدی:

• کل افکت بدون جاوااسکریپت و فقط با animation-timeline ساخته شده.
• scroll(root block) انیمیشن رو به اسکرول کل صفحه وصل می‌کنه و view(block) به مسیر هر عنصر.
• ستون راست با @keyframes drift-up از 12vh تا -20vh جابه‌جا می‌شه.
• همه‌ی افکت داخل @supports هست، پس مرورگرهای قدیمی یه گالری ساده می‌بینن.
• نسخه‌ی اسکرول برعکس به position: sticky و محاسبه‌ی جداگانه‌ی بزرگ‌نمایی هر عکس نیاز داره.