Advertisement
  1. Code
  2. JavaScript
Code

Granim.js का उपयोग कर इंटरएक्टिव ग्रेडियेंट एनिमेशन बनाएं

by
Difficulty:BeginnerLength:MediumLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

सही कलर कॉम्बिनेशन के साथ ध्यान से उपयोग किए जाने पर, ग्रेडियेंट तुरंत वेबसाइट के लुक और फील को बेहतर बना सकते हैं। जब भी किसी एलिमेंट पर ग्रेडिएंट लगाने और इसे एनिमेट करने की बात आती है तो CSS भी एक लंबा सफर तय करता है। इस ट्यूटोरियल में, हम CSS से दूर चले जाएंगे और Granim.js नामक एक जावास्क्रिप्ट लाइब्रेरी का उपयोग करके ग्रेडिएंट एनिमेशन बनायेंगे।

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

सॉलिड कलर ग्रेडियेंट एनिमेशन बनाएँ

इससे पहले कि हम कोई ग्रेडिएंट बनाना शुरू करें, आपको अपने प्रोजेक्ट में लाइब्रेरी शामिल करना होगा। इसके लिए, आप या तो GitHub से Granim.js डाउनलोड कर सकते हैं या सीधे CDN से लिंक कर सकते हैं। लाइब्रेरी संस्करण जो मैं इस ट्यूटोरियल में उपयोग कर रहा हूं 1.1 है। यहां कुछ मेथड्स जिन पर हम चर्चा करेंगे, केवल संस्करण 1.1 में जोड़े गए थे, इसलिए इस ट्यूटोरियल का पालन करते समय पुराने लाइब्रेरी संस्करण का उपयोग करना हमेशा अपेक्षित परिणाम नहीं देगा। इन पॉइंट्स को ध्यान में रखते हुए, आइए Granim.js का उपयोग करके अपना पहला ग्रेडिएंट बनाएं।

हर बार जब आप एक नया Gramin इंस्टैंस बनाते हैं, तो आप इसे key-value जोड़े का ऑब्जेक्ट पास कर सकते हैं, जहां key किसी विशेष प्रॉपर्टी का नाम है और value प्रॉपर्टी की वैल्यू है। element प्रॉपर्टी का उपयोग CSS सिलेक्टर या डोम नोड अप्लाई करने के लिए किया जाता है जो कैनवास को इंगित करेगा जिस पर आप एक विशेष ग्रेडिएंट अप्लाई करना चाहते हैं।

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

इसी तरह, ग्रेडिएंट में किसी अन्य पॉइंट पर गहरा लाल और काला हो सकता है, और ऐसे मामलों में डार्क टेक्स्ट को पढ़ने में आसान नहीं होगा। Granim.js आपको एक कंटेनर एलिमेंट निर्दिष्ट करने की अनुमति देकर इस समस्या को हल करता है जिस पर आप टेक्स्ट या अन्य एलिमेंट्स को तदनुसार स्टाइल के लिए डार्क और लाइट क्लास जोड़ सकते हैं। elToSetClassOn प्रॉपर्टी का वैल्यू डिफ़ॉल्ट रूप से body पर सेट होता है, लेकिन आप किसी अन्य कंटेनर एलिमेंट को भी निर्दिष्ट कर सकते हैं। डार्क और लाइट क्लास के नाम ग्रेडिएंट के औसत कलर के आधार पर स्वचालित रूप से अपडेट होते हैं।

elToSetClassOn प्रॉपर्टी स्वयं ही काम नहीं करती है। आपको name प्रॉपर्टी का उपयोग करके बनाए गए Granim इंस्टैंस के लिए भी एक नाम निर्दिष्ट करना होगा। यदि आप नाम को first-gradient वाले किसी चीज़ पर सेट करते हैं, तो कंटेनर एलिमेंट पर अप्लाई क्लासेज का नाम first-gradient-light या first-gradient-dark बन जाएगा जो वर्तमान में ग्रेडिएंट कितना डार्क या लाइट है। इस तरह, किसी भी एलिमेंट को ग्रेडिएंट के लाइटनेस या डार्कनेस के आधार पर अपना कलर बदलने की जरूरत है, आसानी से ऐसा करने में सक्षम हो जाएगा।

जिस दिशा में ग्रेडिएंट को खींचा जाना चाहिए direction प्रॉपर्टी का उपयोग करके निर्दिष्ट किया जा सकता है। इसमें चार वैलिड वैल्यू हैं: diagonal, left-right, top-bottom, और radial। आपके द्वारा बनाए गए ग्रेडियेंट उन पर्टिकुलर दिशाओं में नहीं चले जाएंगे-वे इस तरह से खींचे जाएंगे। एनीमेशन के दौरान ग्रेडिएंट की स्थिति बदलती नहीं है; केवल इसके कलर ही करते हैं।

एक states प्रॉपर्टी भी है, जो किसी वस्तु को इसके वैल्यू के रूप में स्वीकार करती है। states ऑब्जेक्ट के अंदर निर्दिष्ट प्रत्येक स्टेट का नाम और key-value जोड़े का एक सेट होगा। आप विभिन्न रंगों को निर्दिष्ट करने के लिए gradients प्रॉपर्टी का उपयोग कर सकते हैं जो एक विशेष ग्रेडिएंट बनाना चाहिए। आप इस प्रॉपर्टी का वैल्यू ग्रेडियेंट array के बराबर सेट कर सकते हैं।

Granim.js स्वचालित रूप से एक एनीमेशन तैयार करेगा जहां ग्रेडिएंट के कलर एक सेट से दूसरे में बदल जाते हैं। विभिन्न ग्रेडियेंट्स के बीच ट्रांजीशन डिफ़ॉल्ट रूप से 5,000 मिलीसेकंड लेता है। हालांकि, आप ट्रांजीशन transitionSpeed के लिए उपयुक्त वैल्यू निर्धारित करके एनीमेशन को तेज या धीमा कर सकते हैं।

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

ग्रेडिएंट में प्रत्येक कलर में एक अलग ओपेसिटी हो सकती है, जिसे opacity प्रॉपर्टी का उपयोग करके निर्दिष्ट किया जा सकता है। यह प्रॉपर्टी यह निर्धारित करने के लिए एक array स्वीकार करता है कि प्रत्येक कलर कितना opaque होगा। दो ग्रेडिएंट रंगों के लिए, value [0.1, 0.8] हो सकता है। तीन ग्रेडिएंट रंगों के लिए, value [1, 0.5, 0.75] आदि हो सकता है।

आपके पास stateTransitionSpeed का उपयोग करके ग्रेडिएंट एनीमेशन को एक स्टेट से दूसरे स्टेट में जाने का समय निर्दिष्ट करने का ऑप्शन भी है। यह transitionSpeed प्रॉपर्टी से अलग है, जो एक ही स्टेट के अंदर एनीमेशन गति को नियंत्रित करती है।

निम्नलिखित कोड स्निपेट में, मैंने विभिन्न ग्रेडियेंट ड्रा करने के लिए दो अलग-अलग Granim इंस्टैंस बनाए हैं। पहले मामले में, हमने केवल एक ही ग्रेडिएंट निर्दिष्ट किया है, इसलिए कोई वास्तविक एनीमेशन नहीं है और कलर बिल्कुल भी नहीं बदलते हैं।

एक इमेज पर ग्रेडियेंट एनिमेट करें

Granim.js लाइब्रेरी का एक और आम उपयोग कैनवास पर खींची गई इमेज पर ग्रेडिएंट को एनिमेट करना होगा। image प्रॉपर्टी का उपयोग कर कैनवास पर इमेज को कैसे खींचा जाता है, यह नियंत्रित करने के लिए आप अलग-अलग प्रॉपर्टी निर्दिष्ट कर सकते हैं। यह key-value जोड़े के साथ एक ऑब्जेक्ट को इसके वैल्यू के रूप में स्वीकार करता है। आप उस सोर्स को निर्दिष्ट करने के लिए source प्रॉपर्टी का उपयोग कर सकते हैं, जिससे लाइब्रेरी को कैनवास पर खींचने के लिए इमेज मिलनी चाहिए।

कैनवास पर आपके द्वारा ड्रा की गई कोई भी इमेज खींची जाएगी ताकि उसका केंद्र कैनवास के केंद्र के साथ मेल खा सके। हालांकि, आप इमेज को ड्रा करने के लिए एक अलग स्थिति निर्दिष्ट करने के लिए position प्रॉपर्टी का उपयोग कर सकते हैं। यह प्रॉपर्टी दो एलिमेंट्स की एक array को इसके वैल्यू के रूप में स्वीकार करता है। पहले एलिमेंट में वैल्यू left, center और right हो सकते हैं। दूसरे एलिमेंट में वैल्यू top, center और bottom हो सकते हैं।

ये प्रॉपर्टीज आमतौर पर उपयोगी होते हैं जब आप जानते हैं कि कैनवास का साइज और इमेज मेल नहीं खाती है। इन परिस्थितियों में, आप इस प्रॉपर्टी का उपयोग इमेज के उस भाग को निर्दिष्ट करने के लिए कर सकते हैं जो कैनवास पर दिखाई देनी चाहिए।

यदि इमेजेज और कैनवास के अलग-अलग आयाम होते हैं, तो आप इमेज को भी स्ट्रेच कर सकते हैं ताकि यह कैनवास के अंदर ठीक से फिट हो सके। stretchMode प्रॉपर्टी भी इसके वैल्यू के रूप में दो एलिमेंट्स की एक array स्वीकार करता है। इन दोनों एलिमेंट्स के लिए तीन वैलिड वैल्यूज stretch, stretch-if-smaller, और stretch-if-larger होते हैं।

ब्लेंड मोड के साथ एक ग्रेडिएंट normal पर सेट पूरी तरह से नीचे इमेज को छुपाएगा। सॉलिड रंगों के ग्रेडिएंट के नीचे एक इमेज दिखाने का एकमात्र तरीका एक अलग ब्लेंड मोड का चयन करना होगा। आप MDN पर कैनवास के लिए सभी संभावित ब्लेंड मोड वैल्यूज के बारे में पढ़ सकते हैं।

मैं यह इंगित करना चाहता हूं कि किसी इमेज पर ग्रेडिएंट को एनिमेट करने की क्षमता केवल Granim.js लाइब्रेरी के संस्करण 1.1 में जोड़ा गया था। इसलिए यदि आप इस फीचर को ठीक से काम करना चाहते हैं तो आपको उससे अधिक किसी भी संस्करण का उपयोग करना होगा।

ग्रेडियेंट एनीमेशन प्लेबैक को नियंत्रित करने के तरीके

इस पॉइंट तक, हमारे पास तत्काल होने के बाद ग्रेडिएंट एनीमेशन के प्लेबैक पर कोई नियंत्रण नहीं था। हम इसे pause/play नहीं कर सकते हैं या अपना स्टेट, डायरेक्शन इत्यादि बदल सकते हैं। Granim.js लाइब्रेरी में विभिन्न मेथड्स हैं जो आपको इन सभी टास्क्स को आसानी से पूरा करने देती हैं।

आप play() और pause() मेथड्स का उपयोग करके किसी भी एनीमेशन को चला या रोक सकते हैं। इसी तरह, आप changeState('state-name') मेथड का उपयोग कर ग्रेडिएंट एनीमेशन की स्थिति बदल सकते हैं। यहां state-name उन स्टेट के नामों में से एक होना है जिन्हें आपने परिभाषित किया है जब आपने Granim इंस्टेंस को तुरंत चालू किया था।

संस्करण 1.1 में और मेथड्स को जोड़ा गया था जो आपको एनीमेशन की डायरेक्शन और ब्लेंड मोड को ऑन द फ्लाई बदलने देगा इन मेथड्स का प्रयोग करके changeDirection('direction-name') और changeBlendingMode('blending-mode-name')

निम्न कोड स्निपेट में, मैं इन सभी मेथड्स को कॉल करने के लिए बटन क्लिक ईवेंट का उपयोग कर रहा हूं, लेकिन आप उन्हें कॉल करने के लिए किसी भी अन्य ईवेंट का उपयोग कर सकते हैं।

अंतिम विचार

इस ट्यूटोरियल में, मैंने Granim.js लाइब्रेरी की मूलभूत बातें शामिल की हैं ताकि आप जितनी जल्दी हो सके इसके साथ शुरुआत कर सकें। इन ग्रेडिएंट एनिमेशनों को बनाने के दौरान कुछ अन्य मेथड्स और प्रॉपर्टीज हैं जिन्हें आप उपयोगी पा सकते हैं। उन सभी को पढ़ने के लिए आपको ऑफिशल डॉक्यूमेंटेशन पढ़ना चाहिए।

यदि आप अपने काम में अध्ययन करने या उपयोग करने के लिए अतिरिक्त जावास्क्रिप्ट रिसोर्स ढूंढ रहे हैं, तो जांच करें कि हमारे पास Envato Market में क्या उपलब्ध है।

यदि आपके पास इस ट्यूटोरियल से संबंधित कोई प्रश्न हैं, तो मुझे कमैंट्स में बताने में संकोच न करें।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.