एनिमेटेड ग्रेडिएंट पृष्ठभूमि

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

यहाँ एक लाइव पेज पर चल रहा प्रभाव है अनुभाग अपने रंग सेट के माध्यम से बदलता है जबकि सामग्री रखी रहती हैः

एनिमेटेड ग्रेडिएंट बीजी एक्सटेंशन क्या करता है #

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

सब कुछ सीएसएस में तत्व पर ही चलता है, इसलिए होस्ट करने के लिए कोई वीडियो या संपीड़ित करने के लिए छवि नहीं है, और शीर्ष पर पाठ चयन योग्य और पठनीय रहता है।

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

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया है का पालन करें स्थापना गाइड पहले।
• एनिमेटेड ग्रेडिएंट बीजी एक निःशुल्क एक्सटेंशन है, इसलिए किसी प्रो लाइसेंस की आवश्यकता नहीं है।

एनिमेटेड ग्रेडिएंट बीजी एक्सटेंशन को कैसे सक्षम करें #

अपने वर्डप्रेस डैशबोर्ड से, पर जाएं मास्टर ऐडऑन और खोलो एक्सटेंशन टैब। एनिमेटेड ग्रेडिएंट बीजी बैठता है एनीमेशन विजेट समूह, कण और पृष्ठभूमि स्लाइडर के बगल में इसके टॉगल पर क्लिक करें ताकि यह बैंगनी हो जाए, फिर हिट करें परिवर्तन सहेजें और हरे रंग की प्रतीक्षा करें “सेटिंग्स सफलतापूर्वक सहेजी गई” नोटिस।

एक अनुभाग पर ढाल सेट करें #

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

• एनिमेशन प्रभावः रंग आंदोलन को आसान बनाना, डेमो में आसानी।
• कोण: विकर्ण स्वीप के लिए डेमो में ग्रेडिएंट की दिशा, -45।
• कुल एनीमेशन अवधि (सेकंड): अपने सभी रंगों के माध्यम से एक पूर्ण यात्रा डेमो ६ सेकंड का उपयोग करता है।
• संक्रमण चिकनाई (सेकंड): डेमो में ३ सेकंड में एक रंग अगले रंग को कितनी धीरे से हाथ देता है पैनल संकेत इसे सीधे कहता है: उच्च मूल्य रंगों के बीच चिकनी संक्रमण बनाते हैं।
• रंग: ढाल को पकड़े हुए एक पुनरावर्तक बंद हो जाता है क्लिक करें आइटम जोड़ें किसी अन्य रंग के लिए, या X को गिराने के लिए।

रंगों को उठाओ #

रंग सूची में प्रत्येक पंक्ति एक मानक पिकर खोलती है डेमो एक सियान, बैंगनी और नारंगी सेट के साथ शुरू होता है, फिर स्वैप अंदर और बाहर बंद हो जाता है: एक को हटा दें और लूप कस जाता है, एक गहरा नीला (# ३ डी ६ सीडी ६) जोड़ें और चक्र इसे तुरंत उठाता है लाइव पूर्वावलोकन इसे मजेदार हिस्सा बनाता है; आप अनुभाग के मूड को हर स्टॉप के साथ बदलते हुए देखते हैं जिसे आप छूते हैं।

एक ही तापमान रेंज में दो या तीन रंग सुरुचिपूर्ण के रूप में पढ़ते हैं पूरे पहिया में पांच रंग स्क्रीनसेवर के रूप में पढ़ते हैं छोटे से शुरू करें।

पेज पर रिजल्ट #

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

एक व्यावहारिक नोट: डार्क टेक्स्ट लाइट ग्रेडिएंट स्टॉप पर पठनीय रहता है लेकिन संतृप्त लोगों पर गायब हो सकता है सेट में हर रंग के खिलाफ अपनी हेडलाइन की जांच करें, न कि केवल पहले फ्रेम।

जहां एनिमेटेड ग्रेडिएंट अच्छी तरह से काम करते हैं #

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

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

विस्तार को सक्षम करने से लेकर तैयार चलती पृष्ठभूमि तक, खरोंच से निर्मित ग्रेडिएंट को देखें।

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

लपेटकर #

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