मुख्य सामग्री पर जाएँ

वेबसाइट वीडियो में स्क्रॉल एनिमेशन और पैरलैक्स कैसे कैप्चर करें

फ़ेड-इन, रिवील, पैरलैक्स और पिन किए सेक्शन तभी चलते हैं जब पेज सच में स्क्रॉल होता है। इन्हें वीडियो में कैसे कैप्चर करें, और पूरे पेज को कैप्चर करने वाले ज़्यादातर टूल इन्हें क्यों चूक जाते हैं।

Aviral Lakhanpaul को अपडेट किया गया3 मिनट का पाठ

छोटा जवाब

स्क्रॉल एनिमेशन तभी चलते हैं जब पेज सच में स्क्रॉल हो रहा हो, इसलिए पूरे पेज के एक स्क्रीनशॉट पर पैन करने वाला टूल इन्हें नहीं दिखा सकता। या तो किसी स्क्रिप्ट से पेज स्क्रॉल कराते हुए उसकी स्क्रीन रिकॉर्ड कीजिए, या ऐसा रेंडरर लीजिए जो हर स्क्रॉल स्थिति पर पेज को लाइव कैप्चर करे, जैसे Website Scroll Video का लाइव कैप्चर इंजन। गति के बिना जल्दी नतीजा चाहिए, तो कैप्चर से पहले प्रवेश एनिमेशन को उनकी अंतिम स्थिति तक चला दीजिए।

एनिमेशन ग़ायब क्यों हो जाते हैं

ज़्यादातर URL-से-वीडियो टूल दो चरणों में काम करते हैं: पेज का एक बहुत लंबा स्क्रीनशॉट लेना, फिर उस पर एक फ़्रेम नीचे की ओर चलाना। यह तेज़ है और पूरी तरह सहज, पर स्क्रीनशॉट बस एक पल का होता है। स्क्रॉल की स्थिति से चलने वाली हर चीज़, जैसे व्यूपोर्ट में आते ही फ़ेड होकर उभरने वाली हेडिंग, पैरलैक्स इमेज, ऐसा सेक्शन जो स्क्रॉल करते समय पिन होकर बदलता रहे, या ऊपर गिनता काउंटर, उसी हालत में जम जाती है जिसमें वह उस पल थी।

पेज कैसे बना है, इसके हिसाब से वह हालत इन तीन में से एक होती है:

  • पूरी हो चुकी, जो ठीक लगती है, पर स्थिर।
  • शुरू ही नहीं हुई, जिससे जहाँ सेक्शन होने चाहिए वहाँ ख़ाली जगह रह जाती है, क्योंकि फ़ेड होकर आने का इंतज़ार करते एलिमेंट अब भी अदृश्य हैं।
  • आधे रास्ते में, फ़ेड या स्लाइड के बीच पकड़ी गई, जो टूटी हुई लगती है।

आपके विकल्प

स्क्रॉल एनिमेशन कैप्चर करने के तरीक़े
तरीक़ाएनिमेशनस्क्रॉलरफ़्तार
स्थिर तस्वीर पर पैन, प्रवेश एनिमेशन पूरेअपनी अंतिम स्थिति में दिखते हैंगणना से, पूरी तरह एक जैसातेज़
हर स्क्रॉल स्थिति पर लाइव कैप्चरवैसे ही चलते हैं जैसे विज़िटर देखता हैगणना से, तय फ़्रेम रेट परकाफ़ी धीमा
स्क्रॉल कराती स्क्रिप्ट के साथ स्क्रीन रिकॉर्डिंगरियल टाइम में चलते हैंजितना एक जैसा आपकी मशीन रख सकेरियल टाइम, साथ में एडिटिंग

जल्दी वाला रास्ता: पहले उन्हें पूरा कर दीजिए

अगर एनिमेशन सिर्फ़ प्रवेश वाले हैं, यानी फ़ेड और स्लाइड जो कंटेंट को उसकी जगह पर लाते हैं, तो पेज आम तौर पर अपनी पूरी हो चुकी हालत में सही दिखता है। Website Scroll Video में यह एनिमेशन पूरे करें वाला स्विच है, जो तेज़ स्थिर पैन इंजन के साथ इस्तेमाल होता है। पेज पढ़े जाने से पहले प्रवेश एनिमेशन अंत तक चला दिए जाते हैं, इसलिए कुछ भी अदृश्य या आधे रास्ते में नहीं पकड़ा जाता, और स्क्रॉल किसी भी दूसरे वीडियो जितना ही सहज रहता है और उतनी ही जल्दी रेंडर होता है।

हूबहू वाला रास्ता: इसे लाइव कैप्चर कीजिए

जब गति ही असली बात हो, जैसे ज़्यादातर Framer और Webflow टेम्पलेट, एजेंसी साइटों और प्रोडक्ट लॉन्च में, तो इंजन को लाइव कैप्चर पर बदलिए। एक तस्वीर पर पैन करने के बजाय यह एक असली ब्राउज़र को हर स्थिति तक स्क्रॉल करता है और वहीं स्क्रीनशॉट लेता है, इसलिए रिवील, पैरलैक्स, पिन किए सेक्शन और स्क्रॉल से जुड़े ट्रांसफ़ॉर्म, सब वीडियो में ठीक वैसे ही चलते हैं जैसे पेज पर।

  • स्क्रॉल अब भी गणना से बनता है, इसलिए यह स्थिर पैन जितना ही एक जैसा है और 24, 30 या 60 fps के तय फ़्रेम रेट पर टिका रहता है।
  • पॉज़, हॉवर, फ़्रेम और बैकग्राउंड, सब इसके साथ ठीक वैसे ही काम करते हैं जैसे स्थिर पैन के साथ।
  • यह वीडियो की पूरी लंबाई तक एक असली ब्राउज़र खुला रखता है, इसीलिए यह काफ़ी धीमा रेंडर होता है और एक्सपोर्ट में 13 क्रेडिट जोड़ता है। यह हर अकाउंट पर पहले एक्सपोर्ट से उपलब्ध है, अनलॉक करने के लिए कोई प्लान नहीं।

इसे ख़ुद रिकॉर्ड करना

जिस पेज तक रेंडरर नहीं पहुँच सकता, उसे किसी स्क्रिप्ट से स्क्रॉल कराते हुए स्क्रीन रिकॉर्ड कीजिए। स्क्रिप्ट ऑटो-स्क्रॉल गाइड में है। दो बातों का ध्यान रखिए:

  • Lenis या Locomotive Scroll जैसी स्मूद-स्क्रॉल लाइब्रेरी वाली साइटें अक्सर अपने एनिमेशन ब्राउज़र के स्क्रॉल से नहीं, लाइब्रेरी से चलाती हैं। window.scrollTo चलाने वाली स्क्रिप्ट उन्हें लाँघकर आगे निकल सकती है। वैसे स्क्रॉल कीजिए जैसे साइट उम्मीद करती है, या लाइब्रेरी बंद करके रिकॉर्ड कीजिए और उस फ़र्क़ को स्वीकार कीजिए।
  • भारी एनिमेशन वाले पेज ही रिकॉर्डिंग के दौरान सबसे ज़्यादा फ़्रेम गिराते हैं। बाक़ी सब बंद कीजिए, 60 fps पर रिकॉर्ड कीजिए, और अगर टेक फिर भी अटकता है तो झटकेदार स्क्रॉल रिकॉर्डिंग ठीक करना देखिए।

अपनी साइट पर आज़माकर देखिए

लिंक चिपकाइए और स्क्रॉल का प्रीव्यू मुफ़्त में देखिए। साइन अप पर 51 मुफ़्त क्रेडिट, कोई कार्ड नहीं, और आपके किसी भी एक्सपोर्ट पर वॉटरमार्क नहीं।

हाल की खोजें

    सवाल और जवाब

    लोग आगे जो पूछते हैं, उनके छोटे जवाब।

    संपर्क
    मेरे वेबसाइट स्क्रॉल वीडियो में सेक्शन ख़ाली क्यों हैं?

    ये वे एलिमेंट हैं जो स्क्रॉल पर चलने वाले प्रवेश एनिमेशन का इंतज़ार कर रहे थे, जो कभी चला ही नहीं, क्योंकि टूल ने पेज की एक स्थिर तस्वीर कैप्चर की। कैप्चर से पहले एनिमेशन पूरे कर दीजिए, या ऐसा लाइव कैप्चर इंजन लीजिए जो असली पेज को स्क्रॉल करता है।

    क्या मैं पैरलैक्स स्क्रॉलिंग इफ़ेक्ट रिकॉर्ड कर सकता हूँ?

    हाँ, ऐसे तरीक़े से जो पेज को सच में स्क्रॉल करे: स्क्रिप्ट से चलने वाली स्क्रीन रिकॉर्डिंग, या ऐसा रेंडरर जो हर स्क्रॉल स्थिति पर कैप्चर करे, जैसे Website Scroll Video में लाइव कैप्चर।

    क्या लाइव कैप्चर का अलग शुल्क है?

    यह एक्सपोर्ट में 13 क्रेडिट जोड़ता है, क्योंकि यह वीडियो की पूरी लंबाई तक एक असली ब्राउज़र चालू रखता है। क़ीमत की बाक़ी हर बात वही रहती है।

    Website Scroll Video का लोगो: ब्राउज़र विंडो में वेब पेज के ऊपर एक प्ले बटन।

    रिकॉर्डिंग में कम समय। बनाने में ज़्यादा।

    बदली जा सकने वाली गति, समझदार नियंत्रण और आज के क्रिएटर्स के लिए बने एक्सपोर्ट विकल्पों से वेबसाइट रिकॉर्डिंग को स्वचालित कीजिए।