عرض سينمائي يقوده التمرير
قسم قابل لإعادة الاستخدام يحوّل أي نموذج إلى فيلم قصير: يتسع الفيديو من نافذة صغيرة إلى الشاشة كاملة مع التمرير، يليه معرض صور.
الهدف التقني
منح كل عرض إحساس موقع أنتجته وكالة — لقطات حقيقية وخط واثق وحركة — مع إبقائه نصًا برمجيًا واحدًا بلا اعتماديات يعمل على الهواتف.
القيود
- بلا مكتبات حركة: نص صغير واحد لكل قسم.
- فك ترميز فيديو واحد فقط في كل لحظة لحماية البطارية والبيانات.
- يجب احترام تفضيل تقليل الحركة والتحول إلى تصميم ثابت.
البنية
- 01
عرض مثبّت
قسم طويل بمنصة ثابتة؛ تقدّم التمرير يتحكم في clip-path والتكبير والفصل.
- 02
الفصول
حتى ثلاثة مقاطع تتلاشى بعضها في بعض مع تعليقات؛ ولا يعمل إلا المقطع النشط.
- 03
معرض مثبّت
مسار أفقي يتحرك مع التمرير مع منظور متحرك لكل بطاقة.
- 04
صور النشاط أولًا
عندما تُعرف صور النشاط نفسه، تتصدر المعرض.
يتجه المسار من اليسار إلى اليمين ومن الأعلى إلى الأسفل.
قرارات التنفيذ الرئيسية
اللقطات بدل الثلاثي الأبعاد المولّد
الغرفة الثلاثية الأبعاد المولّدة سابقًا بدت اصطناعية. واللقطات المرخّصة جعلت القسم نفسه يبدو حقيقيًا فورًا.
أنماط ذات بادئة
يُحقن القسم في قوالب مختلفة كثيرة، لذا تحمل كل فئة بادئة لتجنّب التصادم مع CSS القالب — درس تعلمناه من خطأ تخطيط حقيقي.
التحميل المسبق للمقطع التالي فقط
يُحمَّل المقطع الأول فورًا؛ ويُرقّى كل مقطع لاحق من preload='none' قبيل الحاجة إليه.
لقطات الشاشة



التحديات
تصادمات CSS
اسم فئة عام في المعرض تصادم مع قاعدة grid في أحد القوالب فانهار المسار. وإضافة بادئة لكل محدِّد أصلحت ذلك نهائيًا.
تداخل على الجوال
تداخلت الدعوة الأخيرة للإجراء مع شريط الجوال الثابت؛ وعلى الشاشات الصغيرة أصبحت مخفية لصالح الشريط.
الدروس المستفادة
- الحركة المرتبطة بالتمرير يجب أن ترتبط بقيمة تقدّم واحدة؛ وكل شيء آخر يُشتق منها.
- المكونات المحقونة يجب أن تدافع عن أنماطها.
- اللقطات الحقيقية مع ضبط النفس تتفوق على الرسوم المولّدة المعقدة.