अपारदर्शिता, पैमाने, अनुवाद, यहां तक ​​कि दृश्यता और प्रदर्शन का उपयोग करके वेब तत्वों को एक राज्य से दूसरे राज्य में स्थानांतरित करने का विचार बहुत सामान्य और पुराना हो गया है, हालांकि यह उतना बुरा नहीं है, लेकिन यह आगे बढ़ना है, एक नया कदम उठाना है, कुछ और बनना है, और आज मैं आपको एक जादू-जैसे प्रेरित प्रभाव से परिचित कराता हूं जो तत्व को उसके अक्षरों, आयतों, वृत्तों, यहां तक ​​​​कि एक छवि के नमूना कणों जैसे किसी भी चीज़ का उपयोग करके दूर कर देता है! (क्या आप कल्पना कर सकते हैं).

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

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

const rand = (min, max) => Math.floor(Math.random() * (max - min)   min)

लेकिन अब पूफ प्रभाव को प्राप्त करने के लिए, हमें कणों को एनिमेट करने से ठीक पहले अपने प्रारंभिक तत्व को छिपाने की जरूरत है, मैंने इसे छिपाने के लिए स्केल का उपयोग किया, यह स्केलिंग हमारे कणों को भी प्रभावित करेगी, इसे रोकने के लिए हमें इसकी आवश्यकता होगी हमारे कणों को शामिल करने के लिए एक तत्व बनाएं, और यह तत्व हमारे प्रारंभिक तत्व के समान होना चाहिए, और प्रारंभिक तत्व का स्केलिंग एनीमेशन समाप्त होने और कणों के प्रत्येक कण का पूफ़िंग एनीमेशन समाप्त होने के बाद, हम प्रारंभिक तत्व को हटा देंगे वह तत्व जिसमें हमारे कण होते हैं

ध्यान दें कि मैंने 2 सरणियाँ बनाई हैं, एक कणों के लिए "नामित भागों" के लिए, और एक एनिमेशन के लिए, इस दूसरे एरे को हार्ड- का उपयोग किए बिना एनीमेशन की फिनिशिंग का पता लगाने के लिए एक प्रॉमिस.ऑल विधि में पास किया जाएगा। कोडित सेटटाइमआउट्स

  const div = document.querySelector("div");
        let parts = [];
        let animations = [];

return Promise.all(animations.map(animation => animation.finished)).then(() => {
                div.remove()
                poof.remove()
            })

क्या हो सकता है यदि हम अपने कणों को एक केंद्रित स्थिति के बजाय बिल्कुल ग्रिड-जैसे रूप में रखें, और यह रूप पंक्तियों और स्तंभों में होगा, पंक्तियों की स्थिति के लिए लूप के लिए एक मुख्य और स्थिति के लिए लूप के लिए एक नेस्टेड का उपयोग किया जाएगा कॉलम

प्रभाव समाप्त हो गया है! लेकिन रंगीन आयत के बजाय क्लाउड छवि का उपयोग करने के बारे में क्या, और यहां तक ​​कि इसे प्रारंभिक तत्व के रंग के साथ रंगीन भी करें, 2 स्टैक्ड पृष्ठभूमि छवियों का उपयोग करके एक प्रारंभिक तत्व के रंग का रैखिक ढाल है, दूसरा क्लाउड की वास्तविक छवि है, फिर लागू करें बादल की मुखौटा छवि के साथ कण तत्व को छिपाने के साथ-साथ गुणा की पृष्ठभूमि-मिश्रण-मोड

                    --cloud: 
url(https://static.vecteezy.com/system/resources/thumbnails/013/994/726/small/white-3d-cloud-png.png);
                    position: absolute;
                    width: 50px;
                    height: 50px;
                    background: linear-gradient(crimson, crimson) no-repeat center / contain, var(--cloud) no-repeat center / contain;
                    background-blend-mode: multiply;
                    mask: var(--cloud) no-repeat center / contain;
                    top:50%;
                    left: 50%;
                    translate: -50% -50%; 
                    `

जैसा कि मैंने लेख के पहले भाग में कहा था, छवियों के लिए एक पूफ़ प्रभाव होता है जो इसके पिक्सेल का उपयोग करके रंगों का नमूना लेता है और फिर कणों के लिए इन रंगों का उपयोग करता है, इसलिए छवियों के लिए यह पूफ़ प्रभाव हमारा आगामी लेख होगा

यदि आप यहां आए हैं, तो इसका मतलब है कि आपने पढ़ना पूरा कर लिया है, और इस तरह की चीज़ों के प्रति किसी प्रकार का जुनून है, इसलिए एक लाइक/प्यार ❤️ करके इसे दिखाएं।

अधिक जानकारी के लिए मुझे फ़ॉलो करें ?✅
देव.से
ट्विटर/एक्स
लिंक्डइन