Studio Editor: स्क्रॉल एनिमेशन जोड़ना
4 मिनट
ब्राउजिंग एक्सपीरियंस को ज्यादा आकर्षक और यादगार बनाने के लिए, स्क्रॉल एनिमेशंस जोड़ें। एनिमेशन की प्रोग्रेस सीधे स्क्रॉल पोजिशन से जुड़ी होती है, जिससे विजिटर्स के ऊपर या नीचे स्क्रॉल करने पर कोई एलिमेंट दिखाई देता है या ट्रांसफॉर्म होता है।
टिप:
हमारा Wix Studio Academy कोर्स देखें और
एनिमेशंस और इंटरैक्शंस जोड़ने के बारे में ज्यादा जानें।
स्क्रॉल एनिमेशन जोड़ना
नया स्क्रॉल एनिमेशन जोड़ने के लिए, वह एलिमेंट चुनें जो इसे ट्रिगर करता है। विजिटर्स के इस एलिमेंट के आगे स्क्रॉल करने पर आपका चुना गया एनिमेशन शुरू होता है। फिर, तय करें कि किस एलिमेंट को एनिमेट करना है और एनिमेशन टाइप (इन या आउट) चुनें।
स्क्रॉल एनिमेशन जोड़ने के लिए:
- संबंधित एलिमेंट चुनें।
- एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन
पर क्लिक करें।
- एनिमेशंस एंड इफेक्ट्स टैब
पर क्लिक करें। - स्क्रॉल के नीचे + ऐड पर क्लिक करें।
- एनिमेशन सेट अप करें:
- एनिमेटेड एलिमेंट के नीचे चुनें कि एनिमेशन किस एलिमेंट पर दिखाई देगा।
- एलिमेंट अपनी ओरिजिनल प्लेसमेंट में आते या उससे बाहर जाते समय एनिमेट हो, यह तय करने के लिए एनिमेशन टाइप के नीचे कोई ऑप्शन चुनें:
- इन: एनिमेशन का एंडिंग पॉइंट कैनवास पर मौजूद मौजूदा डिजाइन होता है (जैसे, नीचे स्क्रॉल करने पर एलिमेंट फेड इन होता है)।
- आउट: एनिमेशन का स्टार्टिंग पॉइंट कैनवास पर मौजूद मौजूदा डिजाइन होता है (जैसे, नीचे स्क्रॉल करने पर एलिमेंट फेड आउट होता है)।
- लिस्ट से कोई एनिमेशन चुनें।
टिप: एनिमेशंस कैसे दिखाई देंगे, इसका प्रीव्यू देखने के लिए उन पर होवर करें।
नोट्स:
- किसी पिन किए गए एलिमेंट को ट्रिगर के तौर पर सेट नहीं किया जा सकता, क्योंकि वह हमेशा एक ही पोजिशन पर रहता है (विजिटर के व्यूपोर्ट के अनुसार)।
- पक्का करें कि स्क्रॉल एनिमेशन ठीक से दिखाई देने के लिए पेज पर पर्याप्त जगह हो। उदाहरण के लिए, अगर आपका एलिमेंट पेज के पहले या आखिरी फोल्ड पर है, तो हो सकता है कि आपको स्क्रॉल एनिमेशन दिखाई न दे।
हॉरिजॉन्टल स्क्रॉल चाहिए?
इंस्पेक्टर के ऑप्शंस वर्टिकल स्क्रॉलिंग पर लागू होते हैं, लेकिन शानदार हॉरिजॉन्टल स्क्रॉल इफेक्ट बनाने के लिए आप
हमारा Wix Academy ट्यूटोरियल फॉलो कर सकते हैं।
स्क्रॉल एनिमेशन को कस्टमाइज करना
एनिमेशन चुनने के बाद, उसे अपनी पसंद के मुताबिक सेट करें। उपलब्ध सेटिंग्स आपके चुने गए एनिमेशन पर निर्भर करती हैं।
स्क्रॉल एनिमेशन को कस्टमाइज करने के लिए:
- संबंधित एलिमेंट चुनें।
- एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- एनिमेशंस और इफेक्ट्स टैब पर क्लिक करें।
- जिस स्क्रॉल एनिमेशन को बदलना है, उस पर क्लिक करें।
- इसकी सेटिंग्स बदलने के लिए, एडजस्ट एनिमेशन पर क्लिक करें:
- डायरेक्शन: चुनें कि एनिमेशन किस दिशा से आएगा, जैसे बाईं ओर से या ऊपर से।
- स्केल: इस एनिमेशन में एलिमेंट का टारगेट साइज सेट करें। उदाहरण के लिए, 80% का मतलब है कि एनिमेशन में एलिमेंट 20% छोटा हो जाएगा।
- डिस्टेंस: तय करें कि इस एनिमेशन में एलिमेंट कितनी दूर मूव करेगा।
- एनिमेशन एरिया: तय करें कि स्क्रॉल करते समय एनिमेशन किस पॉइंट पर शुरू और बंद होगा। 0% स्क्रीन का निचला हिस्सा है और 100% सबसे ऊपरी हिस्सा। उदाहरण के लिए, एरिया को 0%-50% पर सेट करने से एनिमेशन तब शुरू होगा, जब एलिमेंट स्क्रीन के निचले हिस्से में होगा और बीच में पहुंचने पर बंद हो जाएगा।
टिप:
अपने बनाए जा रहे एनिमेशन को सीधे कैनवास पर देखने के लिए,
स्क्रॉल टू प्रीव्यू टॉगल को इनेबल करें।
स्क्रॉल एनिमेशन हटाना
आप इंस्पेक्टर पैनल से किसी भी समय स्क्रॉल एनिमेशन हटा सकते हैं।
स्क्रॉल एनिमेशन हटाने के लिए:
- संबंधित एलिमेंट या सेक्शन चुनें।
- एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- एनिमेशंस और इफेक्ट्स टैब पर क्लिक करें।
- एनिमेशन पर होवर करें और मोर एक्शंस आइकन
पर क्लिक करें। - रिमूव पर क्लिक करें।
स्क्रॉल एनिमेशन से जुड़ी समस्याएं ठीक करना
स्क्रॉल इफेक्ट बहुत देर से दिखाई देता है
अगर आपका स्क्रॉल एनिमेशन देर से शुरू होता है या उम्मीद के मुताबिक काम नहीं करता, तो समस्या ठीक करने के लिए
एनिमेशन टाइप (इन या आउट) और
एनिमेशन एरिया सेटिंग्स एडजस्ट करें।
देरी की वजह और उसे ठीक करने का तरीका जानने के लिए वीडियो ट्यूटोरियल देखें।
(सिर्फ मोबाइल पर) लैंडस्केप मोड में स्क्रॉल इफेक्ट दिखाई नहीं देता
मोबाइल डिवाइस पर अपने क्लाइंट की साइट देखते समय, अगर विजिटर ब्राउजिंग के बीच अपनी स्क्रीन घुमाता है, तो स्क्रॉल एनिमेशन काम करना बंद कर सकता है। यानी, पेज स्क्रॉल करते समय फोन को हॉरिजॉन्टल (लैंडस्केप मोड) करने पर स्क्रॉल एनिमेशन दिखाई नहीं देगा।
इसे ठीक करने के लिए, विजिटर लैंडस्केप मोड में पेज रिफ्रेश कर सकते हैं। ऐसा करने से एनिमेशन "रिस्टार्ट" हो जाएगा।