पार्टिकल इफ़ेक्ट जनरेटर क्या है?

अपनी वेबसाइट या ऐप के लिए पार्टिकल एनिमेशन डिज़ाइन और प्रीव्यू करें। पार्टिकल काउंट, स्पीड, साइज़, कलर, शेप, इंटरैक्शन और फिज़िक्स सेट करके बर्फ, कंफ़ेटी, जुगनू या गैलेक्सी जैसे इफ़ेक्ट बनाएं। रेडी-टू-यूज़ कोड के रूप में एक्सपोर्ट करें।

अंदर tsParticles चलता है, इसलिए कॉपी किया गया JSON सीधे किसी React, Vue या वनिला JavaScript प्रोजेक्ट में पेस्ट किया जा सकता है। माउस होवर और क्लिक इंटरैक्शन (repulse, grab, bubble, push, remove), ऑपेसिटी फेड और रंग (ह्यू) एनिमेशन पहले से चालू रहते हैं और HTML एक्सपोर्ट CDN के ज़रिये इंजन को साथ ले जाता है, बिल्ड स्टेप के बिना ही स्टैटिक पेज पर चिपका दीजिए। आप लाइव प्रीव्यू को एनिमेटेड GIF के रूप में रिकॉर्ड करके यह इफ़ेक्ट कहीं भी शेयर कर सकते हैं।

उपयोग कैसे करें

1. एक प्रीसेट इफ़ेक्ट (बर्फ, कंफ़ेटी, जुगनू, बुलबुले, गैलेक्सी, नेटवर्क, आतिशबाज़ी, आग, धुआँ) चुनें या स्क्रैच से शुरू करें।
2. पार्टिकल प्रॉपर्टीज़ को फाइन-ट्यून करें: काउंट, स्पीड, साइज़ रेंज, कलर, शेप, ओपैसिटी, और ग्रैविटी व बाउंस जैसी फिज़िक्स सेटिंग्स।
3. लाइव एनिमेशन प्रीव्यू देखें, फिर tsParticles JSON कॉन्फ़िग कॉपी करें, स्टैंडअलोन HTML स्निपेट के रूप में एक्सपोर्ट करें, या प्रीव्यू को एनिमेटेड GIF के रूप में कैप्चर करें।

कब उपयोग करें

• त्योहार या प्रोडक्ट लॉन्च की लैंडिंग पेज पर बर्फ़ या कनफ़ेटी की परत डालने के लिए।
• डिज़ाइनर को सौंपने से पहले SaaS साइट के हीरो सेक्शन का बैकग्राउंड प्रोटोटाइप करने के लिए।
• पोर्टफ़ोलियो या गेम मेन्यू स्क्रीन के लिए गैलेक्सी या जुगनू वाला बैकग्राउंड बनाने के लिए।

परिणाम

एक वेब डेवलपर बर्फ प्रीसेट चुनता है, पार्टिकल काउंट 200 तक बढ़ाता है, हल्की हवा का बहाव जोड़ता है और अपने हॉलिडे लैंडिंग पेज पर विंटर इफ़ेक्ट लगाने के लिए JSON कॉन्फ़िग कॉपी करता है।

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

एक्सपोर्ट किया गया JSON हर फ़्रंटएंड फ़्रेमवर्क में काम करेगा क्या?

हाँ। यह कॉन्फ़िग tsParticles के साथ संगत है, जिसके React, Vue, Svelte, Angular और वनिला JS के लिए आधिकारिक रैपर मौजूद हैं। सही पैकेज इंस्टॉल कीजिए, JSON को options prop में दीजिए, यहाँ दिखी प्रीव्यू जैसा ही असर मिलेगा।

कितने पार्टिकल के बाद यह स्लो होने लगता है?

आज के लैपटॉप पर 200 से 400 पार्टिकल 60 fps पर आराम से चलते हैं। 500 के बाद मिड-रेंज फ़ोन पर लैग दिखने लगता है। स्टार और पॉलीगन शेप वृत्त से ज़्यादा भारी होते हैं। मोबाइल के लिए 100 से 150 पर रहिए और इंटरैक्शन हल्की रखिए।

HTML एक्सपोर्ट के बाद एनिमेशन अलग क्यों दिखता है?

HTML स्निपेट कैनवस को पैरेंट कंटेनर के आकार तक खींच देता है। छोटे div में लगाने पर पार्टिकल भीड़ हो जाते हैं। रैपर को निश्चित ऊँचाई दीजिए (जैसे 100vh या 400px), कैनवस ख़ुद उसी हिसाब से फैल जाएगा।

क्या अपनी इमेज को पार्टिकल का आकार बनाया जा सकता है?

UI से सीधे नहीं, लेकिन इंजन में सुविधा है। JSON एक्सपोर्ट करने के बाद shape.options.image को अपने PNG या SVG की ओर इंगित कीजिए। इमेज उसी साइज़ और ओपैसिटी पर रेंडर होगी जो सिमुलेशन हर पार्टिकल को देती है।

क्या यह एनिमेशन पेज परफ़ॉर्मेंस स्कोर पर असर डालेगी?

इंजन के लिए लगभग 30 से 80 KB (gzipped) जुड़ता है, साथ ही कैनवस लगातार रिपेंट होती है। Lighthouse के लिए मोबाइल पर पार्टिकल कम कीजिए और इंटरैक्शन बंद रखिए। हीरो दिखने के बाद इंजन को लेज़ी लोड करने से LCP स्कोर साफ़ रहता है।

संबंधित उपकरण