वेबसाइट से वीडियो बनाना: उसे अपने आप स्क्रॉल कैसे कराएँ

पेज खोलिए, DevTools खोलिए (F12, या Mac पर ⌥ ⌘ I), इसे Console में चिपकाइए और Enter दबाइए। यह तीन सेकंड रुकती है ताकि आप रिकॉर्डर चालू कर सकें, फिर आपके तय किए समय में पेज को ऊपर से नीचे तक ease-in-out कर्व पर स्क्रॉल करती है।

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 सेकंड का।

• स्मूद (ease-in-out)। ठहराव से शुरू होता है, बीच में एक रफ़्तार से चलता है, और ठहराव पर रुकता है। सही डिफ़ॉल्ट यही है: दोनों सिरे कटे हुए नहीं, सोच-समझकर बने लगते हैं।
• ग्लाइड (ease-out)। तेज़ी से निकलता है और फिसलते हुए रुकता है, जैसे ट्रैकपैड पर उँगली झटकने से होता है। छोटे टीज़र के लिए अच्छा, जिन्हें जोश के साथ खुलना है।
• समान। शुरू से आख़िर तक एक ही रफ़्तार। बैकग्राउंड लूप के लिए सबसे अच्छा, जहाँ रफ़्तार का कोई भी बदलाव नज़र खींचता है।
• पल्स। एक सेक्शन आगे बढ़ता है, ठहरता है, फिर बढ़ता है। ऐसा लगता है जैसे कोई साइट के पन्ने पलट रहा हो, जो प्रोडक्ट टूर के लिए ठीक बैठता है।

जो वीडियो नीचे स्क्रॉल होकर सीधे ऊपर कट जाता है, उसमें लूप होते समय साफ़ झटका दिखता है। इसके बजाय उसी कर्व पर नीचे और वापस ऊपर स्क्रॉल कराइए: आख़िरी फ़्रेम पहले से मिलता है और लूप में कोई जोड़ नहीं दिखता। Website Scroll Video में यह नीचे और वापस प्लेबैक है, जिसमें चाहें तो लौटने से पहले नीचे और लूप दोबारा शुरू होने से पहले ऊपर कुछ देर ठहराव रखा जा सकता है।