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

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

एक अनुभाग पर कण पैनल खोजें #
एलिमेंटर संपादक में कंटेनर या अनुभाग का चयन करें और खोलें शैली टैब। द कणों बैंगनी एमए बैज के साथ अनुभाग अन्य मास्टर एडॉन्स पृष्ठभूमि उपकरण के साथ बैठता है: एनिमेटेड ग्रेडिएंट बैकग्राउंड। [+] पृष्ठभूमि स्लाइडर, और पैटर्न।

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

कणों।js जनरेटर से एक प्रीसेट लें #
द यहां क्लिक करें जेएसओएन फ़ील्ड के ऊपर लिंक कणों को खोलता है।जेएस डेमो साइट, प्रीसेट कॉन्फ़िगरेशन के साथ एक लाइव जनरेटरः डिफ़ॉल्ट, नासा, बबल, स्नो और न्यान कैटएक उठाओ, स्लाइडर्स धुन अगर आप की तरह, और हिट वर्तमान कॉन्फ़िगरेशन (json) डाउनलोड करें.

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

पेज पर रिजल्ट #
प्रकाशित करें और अनुभाग अपने आप ही बर्फ हो जाता है, जैसा कि इस पृष्ठ के शीर्ष पर जीआईएफ में है कण सामग्री के पीछे एक कैनवास पर प्रस्तुत करते हैं, इसलिए शीर्ष पर सब कुछ कुरकुरा रहता है जबकि पृष्ठभूमि चलती रहती है डिफ़ॉल्ट कॉन्फ़िगरेशन कर्सर पर भी प्रतिक्रिया करते हैं; मानक नेटवर्क प्रभाव होवर पर कणों को विकर्षित करता है।
एक व्यावहारिक नोट: कण गणना ड्राइव प्रदर्शन हिम पूर्व निर्धारित ४०० कणों चलाता है और चिकनी रहता है, लेकिन अगर एक पृष्ठ कई कण वर्गों ढेर, गिनती मामूली रखने के लिए और एक मध्य दूरी फोन पर यह जाँच करें।
जहां कण पृष्ठभूमि फिट होती है #
- हीरो अनुभाग। कनेक्टेड-डॉट्स नेटवर्क एक बोल्ड हेडलाइन के पीछे तकनीक और आधुनिक को पढ़ता है।
- मौसमी अभियान। स्नो प्रीसेट किसी भी प्रोमो सेक्शन को एक पेस्ट में बदल देता है।
- सास और स्टार्टअप पेज। धीमी गति से बहने वाले कण पिच से ध्यान भटकाए बिना गहराई जोड़ते हैं।
- अंधेरे वर्गों। नासा जैसे स्टार-फील्ड कॉन्फ़िगरेशन अंधेरे पृष्ठभूमि को जानबूझकर महसूस कराते हैं।
- घटना और लॉन्च पेज। उलटी गिनती के पीछे की गति एक विरल पृष्ठ को जीवित रखती है।
वीडियो ट्यूटोरियल #
प्रकाशित पृष्ठ पर गिरने वाली बर्फ के विस्तार को सक्षम करने से, पूरे सेटअप को देखें।
अक्सर पूछे जाने वाले प्रश्न #
मैं एलिमेंट में एक कण पृष्ठभूमि कैसे जोड़ूं?
मास्टर ऐडऑन एक्सटेंशन टैब में कण एक्सटेंशन सक्षम करें, एक अनुभाग चुनें, और स्टाइल टैब में कण खोलें कण पृष्ठभूमि को हाँ में सक्षम करें और डिफ़ॉल्ट एनिमेटेड नेटवर्क तुरंत दिखाई देता है, कोई कॉन्फ़िगरेशन आवश्यक नहीं है।
मुझे विभिन्न कण प्रभाव कहां मिलेंगे?
पैनल में क्लिक करें यहां लिंक नासा, बबल, स्नो और न्यान कैट जैसे प्रीसेट के साथ कण।js जनरेटर खोलता है। सेटिंग्स को लाइव समायोजित करें, कॉन्फ़िगरेशन को JSON के रूप में डाउनलोड करें, और इसे पार्टिकल JSON फ़ील्ड में पेस्ट करें।
क्या कण पृष्ठ को धीमा कर देते हैं?
प्रभाव हल्के कैनवास पर चलता है और विशिष्ट गणनाओं पर सहज रहता है; स्नो डेमो बिना हकलाए 400 कणों पर चलता है। गिनती को उचित रखें और एक पृष्ठ पर कई कण अनुभागों को ढेर करने से बचें, खासकर मोबाइल आगंतुकों के लिए।
क्या कण माउस पर प्रतिक्रिया कर सकते हैं?
हाँ। कण।js कॉन्फ़िगरेशन में अन्तरक्रियाशीलता सेटिंग्स शामिल होती हैं, और जब कर्सर अनुभाग पर चलता है तो डिफ़ॉल्ट कॉन्फ़िगरेशन कणों को प्रतिकर्षित करता है। होवर और क्लिक व्यवहार दोनों JSON में कॉन्फ़िगर करने योग्य हैं।
क्या कण विस्तार मुक्त है?
हाँ। एक्सटेंशन टैब के एनिमेशन विजेट्स समूह में एलिमेंटर के लिए मास्टर ऐडऑन के मुफ्त संस्करण के साथ कण आते हैं। मूल्य निर्धारण पृष्ठ में यह शामिल है कि प्रो योजनाएं क्या जोड़ती हैं।
लपेटकर #
कण एक्सटेंशन किसी भी एलिमेंटर अनुभाग के पीछे एक लाइव कण कैनवास डालता है: डिफ़ॉल्ट नेटवर्क के लिए एक टॉगल, कणों के लिए एक चिपकाया जेएसओएन।जेएस जनरेटर सपना देख सकता है गिनती को समझदार रखें, जेड-इंडेक्स को सामग्री के पीछे परत को पकड़ने दें, और अनुभाग एक भी संपत्ति अपलोड के बिना स्वाभाविक रूप से बैठता है एनिमेटेड ग्रेडिएंट पृष्ठभूमि और पृष्ठभूमि स्लाइडर एक ही स्टाइल टैब में एक्सटेंशन, और का पूरा सेट मास्टर ऐडऑन विजेट और एक्सटेंशन एक पेज दूर है।