मास्टर एडॉन्स से फ्लोटिंग इफेक्ट एलिमेंटर एक्सटेंशन आपको अपनी वेबसाइट पर किसी भी तत्व के लिए चिकनी, इंटरैक्टिव एनिमेशन जोड़ने की अनुमति देता है अनुवाद, रोटेशन और स्केलिंग जैसे सरल अनुकूलन के साथ, आप सूक्ष्म बना सकते हैं फ्लोटिंग गति या गतिशील ३ डी प्रभाव।
इस ट्यूटोरियल में, हम यह पता लगाएंगे कि अपने तत्वों को जीवन में लाने के लिए इन अनुकूलन विकल्पों का उपयोग कैसे करें, और यह दिखाएं कि पोजिशनिंग एक्सटेंशन सही दिखने के लिए प्लेसमेंट को ठीक करने में कैसे मदद कर सकता है, अंत तक, आप अपनी साइट के लिए आंख को पकड़ने वाले फ्लोटिंग एनिमेशन बनाने के लिए तैयार होंगे।
फ्लोटिंग इफ़ेक्ट एलिमेंटर एक्सटेंशन का उपयोग कैसे करें
फ्लोटिंग प्रभावों के विकल्पों में जाने से पहले आपको यह सुनिश्चित करना होगा कि एक्सटेंशन सक्षम है।
बस अपने डैशबोर्ड पर मास्टर एडॉन्स पर जाएं एक्सटेंशन टैब में जाएं और फ्लोटिंग इफेक्ट्स एक्सटेंशन को टॉगल करें सरल!
इसे सक्षम करने के बाद, आप अपनी साइट पर किसी भी तत्व के उन्नत टैब पर नेविगेट कर सकते हैं और “फ्लोटिंग प्रभाव को खोजने के लिए नीचे स्क्रॉल कर सकते हैं” एक्सटेंशन इसे टॉगल करें और, आपको निम्नलिखित अनुकूलन विकल्प दिखाई देंगे।
1। अनुवाद करें
यह आपको एक्स और वाई अक्षों के साथ एक तत्व को स्थानांतरित करने की अनुमति देता है एक्स अक्ष पर अनुवाद को समायोजित करके, तत्व बाएं और दाएं चलेगा इसी तरह, वाई अक्ष को समायोजित करने से तत्व ऊपर और नीचे चलता है दोनों अक्षों को मिलाकर एक ३ डी फ्लोटिंग प्रभाव पैदा होता है, जो आपके तत्वों में गहराई और गति जोड़ता है।
२ घुमाएँ
इस विकल्प के साथ, आप एक्स, वाई और जेड अक्षों के साथ तत्वों को घुमा सकते हैं यह आपके तत्वों को अधिक गतिशील, कताई प्रभाव देता है।
आप रोटेशन की अवधि और देरी को भी समायोजित कर सकते हैं, जिससे सहज या अधिक नाटकीय बदलाव की अनुमति मिलती है।
3. पैमाना
स्केल प्रभाव आपको एक्स और वाई अक्षों के साथ एक तत्व को फैलाने या सिकोड़ने देता है यह एक बढ़ने/सिकुड़ने वाला एनीमेशन बनाता है, जिससे आपके तत्व विस्तार या अनुबंध करने के लिए दिखाई देते हैं अन्य प्रभावों के साथ, आप एनीमेशन के समय को नियंत्रित करने के लिए अवधि और देरी को समायोजित कर सकते हैं।
इन तीन अनुकूलन विकल्पों को मिलाकर, आप सूक्ष्म आंदोलनों से लेकर अधिक जटिल, आकर्षक एनिमेशन तक, फ्लोटिंग प्रभावों की अंतहीन विविधताएं बना सकते हैं।
हम आपको जांच करने की सलाह देते हैं आउटएलिमेंटर प्रो विशेषताएं के रूप में अच्छी तरह से आप एलिमेंट प्रो और गठबंधन कर सकते हैं मास्टर ऐडऑन आप जिस भी प्रकार की वेबसाइट बनाना चाहते हैं।
प्रभावों का संयोजन
की सबसे शक्तिशाली विशेषताओं में से एक फ्लोटिंग प्रभाव विस्तार अद्वितीय और गतिशील एनिमेशन के लिए अनुवाद, रोटेशन और स्केलिंग को संयोजित करने की क्षमता है इन प्रभावों को लेयर करके, आप सूक्ष्म फ्लोटिंग गति से पूर्ण ३ डी इंटरैक्टिव तत्वों तक कुछ भी बना सकते हैं।
अनुवाद और घुमाएँ को मिलाएंः रोटेशन के साथ पेयरिंग अनुवाद स्क्रीन पर आंदोलन के साथ एक तरल पदार्थ, कताई प्रभाव बनाता है उदाहरण के लिए, आप एक तत्व को तिरछे फ्लोट कर सकते हैं जबकि अधिक गतिशील, ३ डी भ्रम के लिए जगह में घूम सकते हैं।
अनुवाद और स्केल को मिलाएंः अनुवाद और स्केलिंग दोनों का उपयोग करने से एक तत्व को एक ही समय में आकार बदलने और बदलने की अनुमति मिलती है यह एक विस्तार या सिकुड़ते फ्लोटिंग प्रभाव पैदा कर सकता है क्योंकि तत्व स्क्रीन पर बहता है।
तीनों को मिलाएंः अंतिम फ्लोटिंग प्रभाव के लिए, अनुवाद, घुमाएं और स्केल को मिलाएं यह जटिल एनिमेशन के लिए अनुमति देता है जहां तत्व एक बार में चलता है, घूमता है, और बढ़ता/सिकुड़ता है, जिससे इसे एक आकर्षक, बहु-आयामी उपस्थिति मिलती है।
जब आप इन संयोजनों के साथ प्रयोग करते हैं तो संभावनाएं अनंत होती हैं गति और समय को समायोजित करने के लिए अवधि और देरी के लिए विभिन्न मूल्यों के साथ चारों ओर खेलें, किसी भी तत्व के लिए वास्तव में कस्टम फ़्लोटिंग एनीमेशन बनाएं।
किसी छवि पर फ़्लोटिंग प्रभाव बनाना
हमें उम्मीद है, अब तक आप जान चुके होंगे कि फ्लोटिंग इफेक्ट्स एक्सटेंशन के लिए विभिन्न सेटिंग्स को कैसे बदला जाए।
बोनस के रूप में हम आपको दिखाएंगे कि कुछ छवियों के साथ एक अद्भुत अनुभाग कैसे बनाया जाए फ्लोटिंग प्रभाव और पोजिशनिंग एक्सटेंशन:
आप नीचे दिए गए वीडियो का अनुसरण कर सकते हैं जहां हम आपको पूरी प्रक्रिया दिखाते हैं।
सबसे पहले, आइए कुछ छवियां चुनें जिनका उपयोग हम अपना अनुभाग बनाने के लिए करेंगे।
फिर, हम ३ कॉलम और २ पंक्तियों के लिए एक पूर्ण चौड़ाई फ्लेक्सबॉक्स या ग्रिड जोड़ते हैं और उपयुक्त बक्से के अंदर निम्नलिखित स्क्रीनशॉट की तरह सभी छवियों को व्यवस्थित करते हैं।
अब, स्थिति और फ्लोटिंग प्रभाव पर ध्यान केंद्रित करते हैं हम स्थिति के साथ शुरू करने की सलाह देते हैं फ्लोटिंग प्रभाव को लागू करने से पहले सभी छवियों और कणों को ठीक से अपने डिजाइन और स्थिति की सावधानीपूर्वक समीक्षा करें।
हमने छवियों को सटीक स्थिति में लाने के लिए मास्टर एडॉन्स पोजिशनिंग एक्सटेंशन का उपयोग किया है शुरू करने के लिए, स्थिति एक्सटेंशन के भीतर 'सापेक्ष' का चयन करें फिर, आवश्यकतानुसार अपनी छवियों या किसी अन्य तत्व को संरेखित करने के लिए आगे बढ़ें।
हमने सभी छवियों के लिए स्थिति पूरी कर ली है, और संलग्न स्क्रीनशॉट वर्तमान व्यवस्था को दर्शाता है।
अंत में, आइए वांछित छवियों पर फ्लोटिंग प्रभाव लागू करें हमने पहले और तीसरे कॉलम में छवियों के लिए एक्स और वाई प्रभाव का अनुवाद लागू किया है घुमाओ जेड प्रभाव विशेष रूप से प्रोफ़ाइल चित्र पर लागू किया गया है कृपया वर्तमान दृश्य परिणाम देखने के लिए निम्नलिखित जीआईएफ फ़ाइल देखें।
द फ्लोटिंग प्रभाव विस्तार आपकी वेबसाइट पर तत्वों को एनिमेट करने के लिए अनंत संभावनाएं प्रदान करता है अनुवाद, रोटेशन और स्केलिंग के लिए सरल अभी तक शक्तिशाली अनुकूलन विकल्पों के साथ, आप गतिशील, आंख को पकड़ने वाले फ्लोटिंग प्रभाव बना सकते हैं जो आगंतुकों को संलग्न करते हैं जब उनके साथ संयुक्त पोजिशनिंग एक्सटेंशन, वास्तव में अनुकूलित डिज़ाइन के लिए तत्वों की गति और प्लेसमेंट दोनों पर आपका पूर्ण नियंत्रण है।
अपनी साइट के लिए सही फ्लोटिंग प्रभाव खोजने के लिए विभिन्न सेटिंग्स और संयोजनों के साथ प्रयोग करने से डरो मत थोड़ी रचनात्मकता के साथ, आप अपने वेब डिज़ाइन को ऊंचा कर सकते हैं और अधिक इंटरैक्टिव उपयोगकर्ता अनुभव बना सकते हैं।
यदि आपको इस एक्सटेंशन में कोई समस्या आती है, तो बेझिझक यहां टिप्पणी करें या हमारे माध्यम से हमसे संपर्क करें वेबसाइट संपर्क फ़ॉर्म.
