نمایش سینمایی با اسکرول
بخشی قابل استفادهٔ دوباره که هر نمونه را به یک فیلم کوتاه تبدیل می‌کند: با اسکرول، ویدیو از یک قاب کوچک به تمام‌صفحه باز می‌شود و بعد گالری عکس می‌آید.
هدف فنی
به هر دمو حس سایتی را بدهد که یک آژانس ساخته — ویدیوی واقعی، تایپوگرافی مطمئن و حرکت — و در عین حال یک اسکریپت تک و بدون وابستگی بماند که روی موبایل کار کند.
محدودیت‌ها
- بدون کتابخانهٔ انیمیشن: یک اسکریپت کوچک برای هر بخش.
- در هر لحظه فقط یک ویدیو رمزگشایی شود تا باتری و حجم اینترنت حفظ شود.
- باید تنظیم کاهش حرکت را رعایت کند و به چیدمان ثابت برگردد.
معماری
- 01
نمایش سنجاق‌شده
بخشی بلند با صحنهٔ چسبان؛ پیشرفت اسکرول، clip-path، مقیاس و فصل را کنترل می‌کند.
- 02
فصل‌ها
تا سه کلیپ با زیرنویس به هم محو می‌شوند؛ فقط کلیپ فعال پخش می‌شود.
- 03
گالری سنجاق‌شده
یک نوار افقی که با اسکرول جابه‌جا می‌شود و هر کارت پارالاکس خودش را دارد.
- 04
اول عکس‌های خود کسب‌وکار
وقتی عکس‌های خود کسب‌وکار معلوم باشد، گالری با آن‌ها شروع می‌شود.
جریان از چپ به راست و از بالا به پایین است.
تصمیم‌های کلیدی پیاده‌سازی
ویدیو به‌جای سه‌بعدی ساخته‌شده با کد
اتاق سه‌بعدی قبلی که با کد ساخته می‌شد مصنوعی به نظر می‌رسید. ویدیوی دارای مجوز همان بخش را فوراً واقعی کرد.
استایل‌های دارای پیشوند
این بخش در قالب‌های خیلی متفاوتی تزریق می‌شود؛ پس همهٔ کلاس‌ها پیشوند دارند تا با CSS قالب تداخل نکنند — درسی که از یک باگ واقعی چیدمان گرفتیم.
فقط کلیپ بعدی از قبل بارگذاری شود
کلیپ اول بی‌درنگ بارگذاری می‌شود؛ هر کلیپ بعدی درست پیش از نیاز از preload='none' ارتقا می‌یابد.
تصاویر
چالش‌ها
تداخل CSS
یک نام کلاس عمومی در گالری با قانون grid یکی از قالب‌ها تداخل کرد و نوار را جمع کرد. پیشوند گذاشتن روی همهٔ انتخابگرها مشکل را برای همیشه حل کرد.
هم‌پوشانی روی موبایل
دعوت به اقدام پایانی با نوار ثابت موبایل هم‌پوشانی داشت؛ حالا روی صفحه‌های کوچک به نفع همان نوار پنهان می‌شود.
درس‌ها
- حرکت وابسته به اسکرول باید به یک مقدار پیشرفت نگاشت شود؛ بقیه از آن مشتق می‌شوند.
- اجزای تزریق‌شده باید از استایل‌های خودشان محافظت کنند.
- ویدیوی واقعی همراه با خویشتن‌داری، از گرافیک‌های تولیدی پرزرق‌وبرق بهتر است.