بخش‌های ویدیویی وابسته به اسکرول، بدون نابود کردن سرعت

سایت‌های لوکس عاشق بخشی سنجاق‌شده‌اند که ویدیو با اسکرول باز می‌شود و زیرنویس‌ها فصل‌به‌فصل عوض می‌شوند. این همچنین یکی از ساده‌ترین راه‌هایی است که صفحه را لرزان، سنگین و باتری‌خوار می‌کند. بخش نمایشی که در کتابخانهٔ دموها استفاده شده این‌طور ساخته شده که سریع بماند.

#یک مقدار پیشرفت همه‌چیز را کنترل می‌کند

این بخش یک ظرف بلند با یک صحنهٔ چسبان در داخل است. با اسکرول، اسکریپت یک عدد واحد را محاسبه می‌کند — اینکه بازدیدکننده چقدر از ظرف را طی کرده، از ۰ تا ۱ — و همه‌چیز دیگر از آن مشتق می‌شود:

• فاصلهٔ 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 را پردازندهٔ گرافیکی می‌تواند ترکیب کند. متحرک کردن top، width یا background-position روی عناصر بزرگ باعث محاسبهٔ چیدمان یا بازنقاشی می‌شود. گالری افقی با translate3d حرکت می‌کند و پارالاکس هر کارت، تصویر داخلی را با transform جابه‌جا می‌کند نه با تغییر موقعیتش.

#ویدیو را معقول سرو کنید

کلیپ‌ها 720p هستند، هر کدام چند مگابایت، و از طریق یک پراکسی لبه سرو می‌شوند که آن‌ها را کش می‌کند و از درخواست‌های بازه‌ای HTTP پشتیبانی می‌کند تا مرورگر بتواند جلو برود و استریم کند. تصاویر پوستر از عکس‌های ثابت می‌آیند تا پیش از رمزگشایی اولین فریم، چیزی معنادار ظاهر شود.

#کاهش حرکت را رعایت کنید

وقتی بازدیدکننده در سیستمش کاهش حرکت را خواسته، بخش دیگر سنجاق نمی‌شود، گالری یک ردیف معمولی قابل اسکرول می‌شود و متن بدون انیمیشن ظاهر می‌شود. محتوا یکسان است؛ فقط حرکات نمایشی حذف می‌شوند.

#از استایل‌هایتان دفاع کنید

این بخش در قالب‌های خیلی متفاوتی تزریق می‌شود و یکی از آن‌ها یک قانون grid عمومی با نام .gal داشت که بی‌صدا نوار گالری را جمع کرد. حالا همهٔ کلاس‌های این جزء پیشوند دارند. اگر اجزایی می‌سازید که در صفحه‌هایی که کنترلشان نمی‌کنید قرار می‌گیرند، فضای نام جداگانه اختیاری نیست.

#خلاصه

• همه‌چیز را از یک مقدار پیشرفت اسکرول مشتق کنید.
• با requestAnimationFrame زمان‌بندی کنید؛ اول بخوانید، بعد بنویسید.
• یک ویدیوی در حال پخش؛ پیش‌بارگذاری درست به‌موقع؛ توقف بیرون از صفحه.
• فقط ویژگی‌هایی را متحرک کنید که برای ترکیب‌گر مناسب‌اند.
• ویدیو را در لبهٔ شبکه کش کنید و بازه‌ای سرو کنید.
• prefers-reduced-motion را رعایت کنید.
• استایل‌های تزریقی را فضای نام بدهید.