هیروی سینمایی فریمبهفریم میتواند ورود به سایت را به یک تجربه متفاوت تبدیل کند، اما اگر بدون برنامه اجرا شود حجم دانلود، مصرف حافظه و زمان نمایش محتوای اصلی را بالا میبرد. هدف باید روایت بهتر باشد، نه صرفاً نمایش یک افکت سنگین.
از ویدئو تا فریمهای بهینه
ابتدا بخش کوتاهی از ویدئو انتخاب و به فریمهای شمارهدار WebP یا AVIF تبدیل میشود. تعداد فریمها باید با طول اسکرول و کیفیت موردنیاز متعادل باشد. در بسیاری از پروژهها لازم نیست تمام فریمهای ویدئو نگه داشته شوند.
نگاشت اسکرول به شماره فریم
موقعیت اسکرول بین صفر و یک نرمال میشود و سپس به اندیس فریم تبدیل میگردد. نقاشی روی canvas بهتر است در حلقه requestAnimationFrame انجام شود تا مرورگر فقط هنگام تغییر فریم دوباره رسم کند.
پیشبارگذاری هوشمند و جلوگیری از پرش
بارگذاری همه تصاویر در شروع صفحه ممکن است تجربه موبایل را خراب کند. فریم اول باید در اولویت باشد و بقیه تصاویر بهتدریج یا در دستههای کوچک دریافت شوند. تصویر پوستر نیز باید همیشه بهعنوان fallback در HTML وجود داشته باشد.
نسخه سبک برای موبایل و کاهش حرکت
در نمایشگر کوچک میتوان بهجای صدها فریم از یک تصویر، ویدئوی کوتاه یا انیمیشن CSS استفاده کرد. همچنین کاربرانی که گزینه کاهش حرکت را فعال کردهاند نباید مجبور به مشاهده سکانس اسکرولی سنگین باشند.
معیار تصمیمگیری تجاری
اگر این سکانس پیام اصلی محصول را واضحتر میکند و سرعت صفحه در محدوده مناسب باقی میماند، ارزش اجرا دارد. در غیر این صورت یک تصویر قوی همراه با تیتر و فراخوان روشن معمولاً تماس و تبدیل بهتری ایجاد میکند.
درباره نویسنده
رضا اسماعیل گل
طراح سایت، اپلیکیشن و سامانههای خدماتی با ۲۰ سال تجربه کاری. در این بلاگ تجربههای اجرایی پروژههای فارسی را به زبان کاربردی منتشر میکنم.
این موضوع را برای پروژه خودتان میخواهید؟
نیاز، بودجه و نسخه اول پروژه را بررسی میکنیم تا قبل از توسعه مشخص شود چه چیزی واقعاً باید ساخته شود.