کارکردگی تباہ کیے بغیر اسکرول سے چلنے والے ویڈیو حصے

پریمیم ویب سائٹس کو ایسا پِن کیا ہوا حصہ پسند ہے جہاں اسکرول پر ویڈیو کھلتی ہے اور کیپشن باب بہ باب بدلتے ہیں۔ یہ صفحے کو جھٹکے دار، بھاری اور بیٹری کھانے والا بنانے کا آسان ترین طریقہ بھی ہے۔ ڈیمو لائبریری میں استعمال ہونے والا شوکیس حصہ تیز رہنے کے لیے یوں بنا ہے۔

#ایک پیش رفت قدر سب کچھ چلاتی ہے

یہ حصہ ایک اونچا کنٹینر ہے جس کے اندر ثابت اسٹیج ہے۔ اسکرول پر اسکرپٹ ایک عدد نکالتا ہے — وزیٹر کنٹینر میں کتنا آگے ہے، 0 سے 1 تک — اور باقی سب اسی سے نکلتا ہے:

• clip-path کا فاصلہ جو فریم والی ویڈیو کو پوری چوڑائی تک کھولتا ہے،
• فعال ویڈیو پر ہلکا اسکیل،
• کون سا باب (کلپ اور کیپشن) فعال ہے،
• پیش رفت بار کی چوڑائی،
• عنوان کا مدھم ہونا اور سرکنا۔

قدریں CSS کسٹم پراپرٹیز کے طور پر لکھی جاتی ہیں اور باقی کام CSS کرتی ہے۔ ہر عنصر کی الگ اینیمیشن ٹائم لائن ہم آہنگ رکھنی نہیں پڑتی اور کوئی اینیمیشن لائبریری ڈاؤن لوڈ نہیں ہوتی۔

const p = clamp(-rect.top / (rect.height - innerHeight));
stage.style.setProperty('--p', p);

#پڑھنا اور لکھنا ایک فریم میں جمع کریں

اسکرول ایونٹس اسکرین ریفریش سے تیز آتے ہیں۔ ہینڈلر صرف requestAnimationFrame سے کام شیڈول کرتا ہے، اور ہر فریم پہلے لے آؤٹ پڑھتا پھر اسٹائل لکھتا ہے۔ پڑھنا اور لکھنا ملانے سے بار بار لے آؤٹ ہوتا ہے، جو اسکرول جھٹکوں کی سب سے عام وجہ ہے۔

#صرف ایک ویڈیو چلتی ہے

ایک ساتھ تین خودکار ویڈیوز فون گرم کرتی اور ڈیٹا جلاتی ہیں۔ قواعد:

• پہلا کلپ فوراً لوڈ ہوتا ہے تاکہ حصہ کبھی خالی نہ ہو۔
• باقی کلپ preload="none" سے شروع ہوتے ہیں۔
• جب کوئی باب فعال ہو تو اس کا کلپ چلتا ہے اور اگلا کلپ پری لوڈ پر بڑھایا جاتا ہے۔
• غیر فعال کلپ مدھم ہونے کے بعد رک جاتے ہیں۔
• جب پورا حصہ نظر سے باہر ہو تو سب کچھ رک جاتا ہے۔

تمام کلپ خاموش، دہرائے جانے والے اور playsinline ہیں، جو موبائل براؤزرز میں خودکار چلنے کے لیے ضروری ہے۔

#سستی پراپرٹیز کو متحرک کریں

opacity، transform اور clip-path کو GPU جوڑ سکتا ہے۔ بڑے عناصر پر top، width یا background-position متحرک کرنا لے آؤٹ یا دوبارہ پینٹ کراتا ہے۔ افقی گیلری translate3d سے چلتی ہے، اور ہر کارڈ کا پیرالیکس اندرونی تصویر کو مقام بدلنے کے بجائے ٹرانسفارم سے سرکاتا ہے۔

#ویڈیو سمجھداری سے پیش کریں

کلپ 720p ہیں، ہر ایک چند میگا بائٹ، ایک ایج پراکسی کے ذریعے پیش ہوتے ہیں جو انہیں کیش کرتی اور HTTP رینج درخواستوں کی حمایت کرتی ہے تاکہ براؤزر آگے پیچھے جا سکے اور اسٹریم کر سکے۔ پوسٹر ثابت تصاویر سے آتے ہیں تاکہ پہلا فریم ڈی کوڈ ہونے سے پہلے کچھ معنی خیز دکھے۔

#کم حرکت کا احترام کریں

جب وزیٹر نے اپنے نظام سے کم حرکت مانگی ہو تو حصہ پِن ہونا بند کرتا ہے، گیلری عام اسکرول ہونے والی قطار بن جاتی ہے اور متن بغیر اینیمیشن ظاہر ہوتا ہے۔ مواد ایک جیسا ہے؛ صرف رقص ہٹایا جاتا ہے۔

#اپنے اسٹائلز کا دفاع کریں

یہ حصہ بہت مختلف ٹیمپلیٹس میں ڈالا جاتا ہے، اور ان میں سے ایک میں عام .gal grid قاعدہ تھا جس نے خاموشی سے گیلری ٹریک سکیڑ دیا۔ اب جزو کی ہر کلاس پر سابقہ ہے۔ اگر آپ ایسے اجزا بناتے ہیں جو ان صفحات میں ڈالے جاتے ہیں جن پر آپ کا اختیار نہیں، تو نام کی جگہ اختیاری نہیں۔

#خلاصہ

• سب کچھ ایک اسکرول پیش رفت قدر سے نکالیں۔
• requestAnimationFrame سے شیڈول کریں؛ پڑھیں، پھر لکھیں۔
• ایک چلتی ویڈیو؛ بروقت پری لوڈ؛ اسکرین سے باہر توقف۔
• صرف کمپوزیٹر دوست پراپرٹیز متحرک کریں۔
• ویڈیو کو ایج پر کیش اور رینج سے پیش کریں۔
• prefers-reduced-motion کا احترام کریں۔
• ڈالے گئے اسٹائلز کو نام کی جگہ دیں۔