सामग्री तरंग प्रभाव के लिए सीएसएस तकनीक

सीएसएस और जावास्क्रिप्ट का उपयोग कर लहर प्रभाव के लिए विभिन्न तकनीकों में एक गाइड

मुझे हाल ही में वेब एप्लिकेशन में सामग्री डिजाइन से तरंग प्रभाव को लागू करना पड़ा। और तब मुझे एहसास हुआ कि मुझे नहीं पता कि इसे कैसे लागू किया गया। इसने मुझे मौजूदा कार्यान्वयन का अध्ययन करने के लिए एक यात्रा के लिए प्रेरित किया, और यहां तक ​​कि एक नई तकनीक भी आई जो आपके लिए उपयोगी हो सकती है।

यह लहर प्रभाव क्या है?

रुको, आप Google के सामग्री डिज़ाइन से तरंग प्रभाव नहीं जानते हैं? क्या आप एक गुफा में कितने सालों से रह रहे हैं?

जब आप एक बटन दबाते हैं तो लहर प्रभाव का उपयोग किया जाता है। यह माउस या टच इंटरैक्शन के लिए उसी तरह काम करता है।

आपके द्वारा बटन पर क्लिक या स्पर्श करने की स्थिति को संपर्क बिंदु कहा जाता है। वहाँ से, एक लहर को बाहर की ओर भेजा जाता है, अपारदर्शिता को खो देता है क्योंकि यह बड़ा हो जाता है जब तक कि यह पूरे बटन को भरता नहीं है। तब यह पूरी तरह से गायब हो जाता है।

इस तरंग प्रभाव की गतिकी उस तरंग के समान होती है जो आपको किसी तरल सतह को छूने पर मिलती है, या जब आप किसी चट्टान को झील में गिराते हैं।

लहरें आपको वेब पर मिलेंगी

कुछ शोध करने के बाद, मुझे दो मुख्य तकनीकों का पता चला, जिनका उपयोग वेब अनुप्रयोगों पर तरंग प्रभाव को लागू करने के लिए किया जाता है।

प्रयोग :: छद्म तत्व के बाद

इस तकनीक का उपयोग करते हुए, बटन के छद्म तत्व के बाद :: अर्ध-पारदर्शी सर्कल के रूप में स्टाइल किया जाता है, और बढ़ने और फीका करने के लिए एनिमेटेड। कंटेनर बटन को ओवरफ्लो होना चाहिए: छिपा हुआ ताकि बटन की सतह के बाहर सर्कल कभी भी ओवरफ्लो न हो, और स्थिति: बटन के भीतर सर्कल की स्थिति को आसान बनाने के लिए सापेक्ष। आप Ionu I Colceriu के इस लेख पर इस तकनीक के अधिक विवरण पढ़ सकते हैं।

इस तकनीक के बारे में एक बड़ी बात यह है कि यह लहर प्रभाव के लिए एक शुद्ध सीएसएस समाधान है। हालांकि, संपर्क के बिंदु के बजाय रिपल प्रभाव हमेशा बटन के केंद्र से शुरू होता है। यह सबसे स्वाभाविक प्रतिक्रिया नहीं है।

संपर्क के बिंदु को संग्रहीत करने के लिए जावास्क्रिप्ट का उपयोग करके इसे बेहतर किया जा सकता है, और इसका उपयोग रिपल की स्थिति के लिए किया जा सकता है। यह ठीक वैसा ही है जैसा कि सामग्री .io ने अपने वेब तरंग घटक के लिए किया है। यह संपर्क के बिंदु को संग्रहीत करने के लिए CSS चर का उपयोग करता है, और बाद में छद्म तत्व स्थिति के लिए इन चर का उपयोग करता है।

बाल तत्वों का उपयोग करना

संक्षेप में, यह तकनीक पहले की तरह ही रणनीति का उपयोग करती है। लेकिन छद्म तत्व के बजाय, यह बटन के अंदर एक स्पैन तत्व जोड़ता है, जिसे तब जावास्क्रिप्ट के माध्यम से पोस्ट किया जा सकता है। इस तकनीक का वर्णन इस लेख पर Jhey Tompkins ने किया है।

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

मुझे इसकी एक और भिन्नता मिली, जिस पर एक समय के बजाय बाल तत्व एक svg है, और svg जावास्क्रिप्ट के माध्यम से एनिमेटेड है। इस भिन्नता को डेनिस गेबेल द्वारा समझाया गया है, लेकिन संक्षेप में यह समान प्रतीत होता है, और शायद जटिल एसवीजी आकार और प्रभाव का उपयोग करने की अनुमति देता है।

सबमिट इनपुट के साथ एक समस्या

ऊपर वर्णित दोनों तकनीक बहुत अच्छी लगती हैं। लेकिन यह तब होता है जब मैंने उन्हें टाइप = सबमिट के साथ इनपुट तत्वों पर लागू करने की कोशिश की:

वे काम क्यों नहीं करते?

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

इसलिए, यदि आप सामग्री डिज़ाइन का उपयोग कर रहे हैं, तो इनपुट [टाइप = सबमिट] से दूर रहना और बटन तत्वों से चिपके रहना बेहतर है। या सिर्फ पढ़ते रहे।

इनपुट सबमिट करने के लिए रिपल को जोड़ना

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

एक रैपिंग कंटेनर का उपयोग करना

मुझे जल्दी से एहसास हुआ कि मैं इनलाइन-ब्लॉक एलिमेंट के अंदर सबमिट बटन को लपेट सकता हूं, और इनलाइन-ब्लॉक एलिमेंट को रिप्पड सतह के रूप में उपयोग कर सकता हूं। यहाँ एक त्वरित डेमो है:

जबकि मुझे इसकी सरलता के लिए यह समाधान पसंद है, फिर भी मुझे कई स्थानों पर मार्कअप बदलने की आवश्यकता थी। और मुझे पता था कि यह एक नाजुक समाधान होगा - नए डेवलपर्स परियोजना में आएंगे, और एक रिपल सतह में उन्हें ठीक से लपेटे बिना बटन सबमिट करेंगे। इसलिए मैं अन्य समाधानों की खोज करता रहा, जिनके लिए DOM को बदलने की आवश्यकता नहीं है।

रेडियल ग्रेडिएंट्स

रेडियल-ग्रेडिएंट सिंटैक्स मुझे केंद्र और ग्रेडिएंट के आकार दोनों को नियंत्रित करने की अनुमति देता है। बेशक, यह मुझे अर्ध-पारदर्शी रंगों सहित ढाल के रंग को नियंत्रित करने की भी अनुमति देता है। और यह कभी भी उस तत्व पर हावी नहीं होता है जिस पर यह लागू होता है। तो ऐसा लगता है जैसे यह पहले से ही सब कुछ मेरी ज़रूरत है!

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

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

अंत में, जावास्क्रिप्ट के साथ एक समाधान

आप CSS में क्या नहीं कर सकते, आप इसे जावास्क्रिप्ट में कर सकते हैं। सीएसएस एनिमेशन का उपयोग करते हुए इस प्रभाव को प्राप्त करने की कोशिश करने के लिए तैयार होने से अधिक समय बिताने के बाद, मैंने अभी हार मान ली और जावास्क्रिप्ट में एनीमेशन लिखने का फैसला किया।

मैंने ऊपर रेडियल ग्रेडिएंट सॉल्यूशन के साथ शुरुआत की, और विंडो का उपयोग किया ।requestAnimationFrame रेडियल ग्रेडिएंट का तरल पदार्थ एनीमेशन बनाने के लिए, बढ़ते और लुप्त होती। यहाँ मेरा अंतिम समाधान है:

निष्कर्ष

इसलिए सबमिट बटन पर रिपल इफेक्ट होना संभव है, सिर्फ सीएसएस के साथ नहीं।

मैं इस तकनीक को वेब में कहीं भी प्रलेखित नहीं कर पाया, इसलिए मैं इसे अपना कह रहा हूं। लियोनार्डो की तरंग तकनीक को DOM में परिवर्तन की आवश्यकता नहीं है, और किसी भी तत्व के लिए काम करता है क्योंकि यह छद्म तत्वों या बाल तत्वों पर निर्भर नहीं है। हालाँकि, यह एक निर्दोष समाधान नहीं है।

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

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

तीसरा, यह इंटरनेट एक्सप्लोरर में काम नहीं करता है। हालाँकि, मुझे कोई कारण नहीं दिखता कि यह IE10 और इसके बाद के संस्करण के साथ काम क्यों न करे। शायद यह इसलिए है क्योंकि IE रेडियल-ग्रेडिएंट के लिए एक अलग सिंटैक्स का उपयोग करता है। लेकिन, IE के बारे में कौन परवाह करता है? (संपादित करें: यह विधि इंटरनेट एक्सप्लोरर 11 पर किसी भी मुद्दे के बिना काम करती है)