صنع فيديو من موقع إلكتروني: كيف تجعله يُمرَّر تلقائيًا

افتح الصفحة، ثم افتح DevTools (F12، أو ⌥ ⌘ I على Mac)، والصق هذا في Console واضغط Enter. ينتظر ثلاث ثوانٍ لتشغّل المسجّل، ثم يمرّر الصفحة من الأعلى إلى الأسفل على منحنى تخفيف في البداية والنهاية خلال الوقت الذي تحدده.

const SECONDS = 20;        // مدة التمرير
const WAIT = 3;            // وقت لتشغيل المسجّل

document.documentElement.style.scrollBehavior = 'auto';
window.scrollTo(0, 0);

const end = document.documentElement.scrollHeight - innerHeight;
const ease = (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);

setTimeout(() => {
  const start = performance.now();
  const step = (now) => {
    const t = Math.min(1, (now - start) / (SECONDS * 1000));
    window.scrollTo(0, end * ease(t));
    if (t < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}, WAIT * 1000);

• سطر scrollBehavior = 'auto' مهم. فكثير من المواقع تضبط scroll-behavior: smooth، وهذا يحوّل كل حركة صغيرة من حركات السكربت إلى حركة متحركة مستقلة، فيعود التقطّع فورًا.
• requestAnimationFrame يحرّك الصفحة مرة واحدة لكل إطار معروض، فيأتي التمرير منتظمًا بقدر ما تسمح الشاشة.
• مرّر إلى الأسفل ثم عُد إلى الأعلى بيدك مرة قبل تشغيله، كي تكون الصور المؤجلة التحميل في مكانها ولا يتغير ارتفاع الصفحة في منتصف اللقطة.
• المواقع المبنية على مكتبة تمرير ناعم مثل Lenis أو Locomotive Scroll تتولى التمرير بنفسها، وقد تتعارض مع السكربت. فإن ترنّحت الصفحة، فهذا هو السبب.

السكربت يترك معدل الإطارات لمسجّلك ولجهازك. أما المُصيِّر فيُسقط الاثنين: Website Scroll Video يقرأ الصفحة كاملة مرة واحدة، ثم يحسب أين يجب أن تكون في كل إطار من فيديو بمعدل ثابت 24 أو 30 أو 60 fps، فلا تُسقط الصفحة الثقيلة إطارات ولا تنحرف الصفحة الطويلة عن إيقاعها. تضبط الأشياء نفسها التي يضبطها السكربت، بالثواني وبالمنحنى، وتعاين النتيجة قبل أن تنفق شيئًا.

قِس الصفحة بالشاشات: ارتفاعها الكامل مقسومًا على ارتفاع النافذة. صفحة الهبوط المعتادة من خمس إلى ثماني شاشات. ثم:

أسرع من شاشة في الثانية ويتحول النص إلى لطخة ضبابية، خاصةً عند 30 fps أو في GIF. وأبطأ من ثلاث ثوانٍ ويتشتت انتباه المشاهدين. وحيث يكون قسم أهم من البقية، فالوقفة عنده أفضل من إبطاء الصفحة كلها؛ ويسمح Website Scroll Video بما يصل إلى 6 وقفات، مدة كل منها بين 0.5 و5 ثوانٍ.

• «ناعم» (تخفيف في البداية والنهاية). يبدأ من السكون، ثم يسير بسرعة ثابتة، ثم يعود إلى السكون. وهو الخيار الافتراضي الصحيح: الطرفان يبدوان مقصودين لا مبتورين.
• «انسيابي» (تخفيف في النهاية). ينطلق بسرعة ثم يتباطأ حتى يتوقف، كنقرة سريعة على لوحة اللمس. مناسب للمقاطع التشويقية القصيرة التي يجب أن تبدأ بحيوية.
• «خطي». سرعة واحدة من البداية إلى النهاية. الأفضل لحلقة متكررة في الخلفية، حيث يلفت أي تغيّر في الإيقاع النظر.
• «نبضي». يتحرك قسمًا، ثم يستقر، ثم يتحرك من جديد. يبدو كأن أحدًا يتصفح الموقع صفحة بعد صفحة، وهذا يناسب جولات المنتجات.

الفيديو الذي يُمرَّر إلى الأسفل ثم يقفز عائدًا إلى الأعلى فيه قفزة ظاهرة عند التكرار. بدلًا من ذلك، مرّر إلى الأسفل ثم عُد إلى الأعلى على المنحنى نفسه: يطابق الإطار الأخير الإطار الأول ويتكرر الفيديو بلا وصلة. وفي Website Scroll Video هذا هو خيار «نزولًا وعودة» في «التشغيل»، مع استراحة اختيارية في الأسفل قبل العودة، وفي الأعلى قبل أن يبدأ التكرار من جديد.