اسکرول سے چلنے والی سنیمائی نمائش
دوبارہ استعمال ہونے والا حصہ جو ہر نمونے کو مختصر فلم بنا دیتا ہے: اسکرول پر ویڈیو چھوٹی کھڑکی سے پوری اسکرین تک کھلتی ہے، پھر تصویری گیلری آتی ہے۔
تکنیکی مقصد
ہر ڈیمو کو ایجنسی کی بنی سائٹ جیسا احساس دینا — اصل ویڈیو، پُراعتماد ٹائپوگرافی اور حرکت — جبکہ یہ ایک ہی، بغیر انحصار والا اسکرپٹ رہے جو فونز پر چلے۔
پابندیاں
- کوئی اینیمیشن لائبریری نہیں: ہر حصے کے لیے ایک چھوٹا اسکرپٹ۔
- بیٹری اور ڈیٹا بچانے کے لیے ایک وقت میں صرف ایک ویڈیو ڈی کوڈ ہو۔
- کم حرکت کی ترجیح کا احترام اور جامد ترتیب پر واپسی ضروری۔
آرکیٹیکچر
- 01
پِن کی گئی ریل
ثابت اسٹیج والا اونچا حصہ؛ اسکرول کی پیش رفت clip-path، اسکیل اور باب چلاتی ہے۔
- 02
ابواب
تین تک کلپس کیپشنز کے ساتھ ایک دوسرے میں مدغم؛ صرف فعال کلپ چلتا ہے۔
- 03
پِن کی گئی گیلری
اسکرول سے سرکنے والا افقی ٹریک، ہر کارڈ کے پیرالیکس کے ساتھ۔
- 04
پہلے اپنی تصاویر
جب کاروبار کی اپنی تصاویر معلوم ہوں، گیلری انہی سے شروع ہوتی ہے۔
بہاؤ بائیں سے دائیں، اوپر سے نیچے ہے۔
اہم فیصلے
کوڈ سے بنے 3D کے بجائے ویڈیو
پہلے والا کوڈ سے بنا 3D کمرہ مصنوعی لگتا تھا۔ لائسنس یافتہ ویڈیو نے وہی حصہ فوراً حقیقی بنا دیا۔
سابقے والے اسٹائل
یہ حصہ بہت مختلف ٹیمپلیٹس میں ڈالا جاتا ہے، اس لیے ہر کلاس پر سابقہ ہے تاکہ ٹیمپلیٹ CSS سے ٹکراؤ نہ ہو — ایک حقیقی لے آؤٹ بگ سے سیکھا سبق۔
صرف اگلا کلپ پہلے سے لوڈ
پہلا کلپ فوراً لوڈ ہوتا ہے؛ ہر اگلا کلپ ضرورت سے ذرا پہلے preload='none' سے بڑھایا جاتا ہے۔
اسکرین شاٹس



چیلنجز
CSS ٹکراؤ
گیلری میں ایک عام کلاس نام ایک ٹیمپلیٹ کے grid قاعدے سے ٹکرایا اور ٹریک سکڑ گیا۔ ہر سلیکٹر پر سابقہ لگانے سے یہ مستقل ٹھیک ہو گیا۔
موبائل پر اوورلیپ
آخری دعوتِ عمل موبائل کی ثابت بار پر چڑھ گئی؛ چھوٹی اسکرینوں پر اب بار کے حق میں چھپ جاتی ہے۔
حاصل شدہ سبق
- اسکرول سے جڑی حرکت ایک پیش رفت کی قدر سے بندھی ہو؛ باقی سب اسی سے نکلے۔
- ڈالے گئے اجزا کو اپنے اسٹائل کا دفاع کرنا چاہیے۔
- اصل ویڈیو اور ضبط پیچیدہ بنائے گئے گرافکس سے بہتر ہیں۔