रिलैक्स

लंबन वह प्रभाव है जहां एक पृष्ठ के विभिन्न भाग अलग-अलग गति से स्क्रॉल करते हैं, इसलिए पृष्ठभूमि अग्रभूमि की तुलना में धीमी गति से बहती है और अनुभाग गहराई की भावना को उठाता है रिलैक्स में विस्तार एलिमेंट के लिए मास्टर ऐडऑन जोड़ता है कि एलिमेंटर लंबन स्क्रॉलिंग जावास्क्रिप्ट की एक पंक्ति को छूने के बिना, किसी भी तत्व, एक छवि, एक शीर्षक, एक पूरे कॉलम पर प्रभाव यह तत्व के उन्नत टैब पर एक अनुभाग के रूप में दिखाता है, जिसमें गति, आंदोलन प्रतिशत, जेड-इंडेक्स और दिशा के लिए नियंत्रण होता है।

यहां बताया गया है कि रिलैक्स कहां रहता है, प्रत्येक सेटिंग क्या करती है, और पेज लाइव होने के बाद प्रभाव कैसा दिखता है।

रिलैक्स एक्सटेंशन क्या करता है #

रिलैक्स आपके द्वारा चुने गए किसी भी तत्व के लिए एक स्क्रॉल-आधारित एनीमेशन पिन करता है आगंतुक स्क्रॉल के रूप में, वह तत्व पृष्ठ के बाकी हिस्सों की तुलना में तेज़ या धीमी गति से चलता है, जो आपके द्वारा निर्धारित गति के आधार पर एक नायक छवि पर इंगित करता है और पृष्ठभूमि ग्लाइड करता है; इसे एक शीर्षक पर इंगित करें और पाठ इसके चारों ओर सब कुछ से आगे तैरता है चूंकि यह प्रति तत्व काम करता है, आप एक ही अनुभाग में कुछ अलग-अलग गति को मिला सकते हैं और एक समर्पित लंबन प्लगइन के बिना एक स्तरित स्क्रॉल का निर्माण कर सकते हैं।

इसे दो अन्य मास्टर एडॉन्स मोशन टूल्स के स्क्रॉल-आधारित चचेरे भाई के रूप में सोचेंः फ्लोटिंग प्रभाव, जो बिना किसी स्क्रॉलिंग के अपने आप एक तत्व को एनिमेट करता है, और रूप बदल देती है, जो घुमा, स्केल और तिरछा संभालती है।

इससे पहले कि आप शुरू करें #

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय यदि आपने इसे अभी तक स्थापित नहीं किया है, तो इसका पालन करें स्थापना गाइड.
• मास्टर ऐडऑन विकल्प पैनल में Rellax एक्सटेंशन सक्षम है।
• चेतन करने के लिए एक तत्व कोई भी एलिमेंट या मास्टर एडॉन्स विजेट काम करता है, जिसमें एक छवि, ए ग्रेडिएंट हेडलाइन, या एक अनुभाग।

एलिमेंटर में लंबन प्रभाव कैसे जोड़ें #

उस तत्व का चयन करें जिसे आप स्थानांतरित करना चाहते हैं खोलें उन्नत एलिमेंटर पैनल में टैब करें और नीचे स्क्रॉल करें रिलैक्स अनुभाग (यह बैंगनी मास्टर एडॉन्स बैज वहन करता है) इसे विस्तारित करें और फ्लिप करें सक्षम रिलैक्स को हाँ। वह टॉगल पूरे प्रभाव के लिए स्विच है, इसलिए जब तक यह चालू न हो तब तक कुछ नहीं होता।

एक चीज जो लोगों को ऊपर ले जाती है: लंबन केवल लाइव पेज पर या पूर्वावलोकन में चलता है, जब आप कैनवास पर संपादन कर रहे हों तो कभी नहीं तो संपादक के अंदर तत्व को स्थानांतरित करने की प्रतीक्षा न करें, इसे देखने के लिए पूर्वावलोकन दबाएं।

रिलैक्स सेटिंग्स समझाया #

सक्षम रिलैक्स के साथ, बाकी नियंत्रण आकार देते हैं कि तत्व कैसे यात्रा करता हैः

• गति: स्क्रॉल के सापेक्ष तत्व कितनी तेजी से चलता है उच्च सकारात्मक संख्याएं इसे तेजी से ऊपर ले जाती हैं क्योंकि आप नीचे स्क्रॉल करते हैं नकारात्मक संख्याएं इसे दूसरी तरफ धक्का देती हैं डेमो का उपयोग करता है 6। लगभग 4 से 6 तक प्रारंभ करें और वहां से समायोजित करें, क्योंकि बड़े मान किसी तत्व को उसके अनुभाग से साफ़ कर सकते हैं।
• प्रतिशत: एनीमेशन का प्रारंभिक बिंदु, ० से १ तक, इस पर आधारित है कि तत्व व्यूपोर्ट में कहां बैठता है डेमो इसे सेट करता है 0.4। जब प्रभाव बहुत जल्दी या बहुत देर से शुरू हो तो इसे हिलाएं।
• जेड-सूचकांक: स्टैकिंग ऑर्डर, सीएसएस जेड-इंडेक्स के समान विचार। इसे उठाएँ (डेमो उपयोग करता है) 3) जब किसी लंबन तत्व को पड़ोसी के ऊपर या नीचे बैठने की आवश्यकता होती है तो यह मध्य-स्क्रॉल को ओवरलैप करता है।
• लंबवत: पृष्ठ स्क्रॉल के रूप में तत्व को ऊपर और नीचे ले जाएं यह सामान्य लंबन दिशा है।
• क्षैतिज: इसके बजाय तत्व को बाएं और दाएं स्थानांतरित करें उन तत्वों के लिए आसान है जिन्हें आप पक्ष से स्लाइड करना चाहते हैं।

गति और प्रतिशत दोनों में उनके बगल में उत्तरदायी आइकन है, इसलिए आप डेस्कटॉप, टैबलेट और मोबाइल के लिए अलग-अलग मान सेट कर सकते हैं यह लगता है कि एक विस्तृत डेस्कटॉप पर बहुत अच्छा दिखने वाली गति फोन पर परेशान महसूस कर सकती है, जहां स्क्रीन छोटी है और तत्व एक छोटी सी जगह में बहुत सारी जमीन को कवर करता है मोबाइल की गति को डायल करना आमतौर पर ठीक है।

लाइव पेज पर लंबन प्रभाव देखें #

पृष्ठ प्रकाशित करें (या पूर्वावलोकन खोलें) और स्क्रॉल करें तत्व जिसे आपने सक्षम किया था रिलैक्स अपनी गति से चलता है जबकि बाकी पृष्ठ सामान्य रूप से स्क्रॉल करता है, और वह गति अंतर जो गहराई बेचता है यहां डेमो हीरो है, एक लंबन छवि स्क्रॉलिंग के साथ एक “स्क्रॉल यूपी” शीर्षक के खिलाफः

यदि आंदोलन बहुत मजबूत या बहुत सूक्ष्म लगता है, तो गति नियंत्रण पर वापस जाएं और इसे ट्विक करें लंबन उन प्रभावों में से एक है जहां एक छोटी संख्या आमतौर पर एक बड़े से बेहतर पढ़ती है।

सामान्य उपयोग के मामले #

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

गति के लिए जो स्क्रॉलिंग से बंधा नहीं है, रेलैक्स के साथ जोड़ी बनाएं प्रवेश एनीमेशन इसलिए तत्व दिखाई देते ही चेतन हो जाते हैं, फिर जैसे-जैसे स्क्रॉल जारी रहता है, लंबन के साथ चलते रहें। पूर्ण ब्राउज़ करें विजेट और एक्सटेंशन बाकी मोशन टूलकिट देखने के लिए सूची।

वीडियो ट्यूटोरियल #

देखना पसंद करते हैं? यह वीडियो रिलैक्स एक्सटेंशन के माध्यम से अंत से अंत तक चलता है, इसे एक तत्व पर सक्षम करने से लेकर लाइव पेज पर लंबन स्क्रॉल तकः

अक्सर पूछे जाने वाले प्रश्न #

लपेटकर #

Rellax एक्सटेंशन जोड़ने का सबसे तेज़ तरीका है एलिमेंटर लंबन स्क्रॉलिंग एक अलग प्लगइन या कस्टम कोड के बिना प्रभाव इसे किसी भी तत्व पर सक्षम करें, गति, प्रतिशत, जेड-इंडेक्स और दिशा सेट करें, और तत्व लाइव पेज पर वास्तविक गहराई के साथ स्क्रॉल करता है स्क्रीन के चारों ओर चीजों को स्थानांतरित करने के अधिक तरीकों के लिए, एक नज़र डालें रूप बदल देती है और फ्लोटिंग प्रभाव, और जाँच करें मूल्य निर्धारण पृष्ठ प्रो में क्या शामिल है के लिए।