Granim.js के साथ सुंदर ढाल बदलाव बनाएँ
वेब डिज़ाइन सुंदरता और मनभावन इंटरफ़ेस डिज़ाइन से भरा है। कुछ विशेषताएं कार्यात्मक हैं जबकि अन्य केवल दिखाने के लिए हैं. धीरे-धीरे संक्रमण कर रहे हैं केवल दिखाने के लिए लेकिन वे काफी पंच पैक करते हैं!
साथ में Granim.js, आप निर्माण कर सकते हैं कस्टम पूर्ण रंग ढाल संक्रमण कि किसी भी वेबसाइट के साथ चिकनी और जाल अच्छी तरह से देखो.
तुम खोज सकते हो कस्टम उदाहरणों का एक गुच्छा पृष्ठभूमि के चित्रों का उपयोग करके सरल संक्रमण से अधिक जटिल एनिमेशन तक कई अलग-अलग शैलियों के साथ मुख्य उदाहरण पृष्ठ पर.
Granim केवल JS लाइब्रेरी है जो मैं जानता हूँ ढाल परिवर्तन से निपटने. यह एक ऐसा प्रश्न है जिसके बारे में मैंने हमेशा आश्चर्य किया है और कभी भी एक महान जवाब नहीं मिला है। Granim सही समाधान है और यह है वेनिला जावास्क्रिप्ट पर बनाया गया, इसलिए यह jQuery या किसी अन्य JS लाइब्रेरी के साथ चल सकता है.
केवल गिराओ granim.js अपने पेज में दर्ज करें आरंभ करना। आप या तो GitHub से एक प्रति डाउनलोड कर सकते हैं या एक लाइव CDN से होस्ट कर सकते हैं.
यहां बताया गया है एक मूल कोड नमूना GitHub रेपो से:
चीजें इससे बहुत अधिक जटिल हो सकती हैं इसलिए आपको वास्तव में चाहिए उदाहरणों में खोदो ज्यादा सीखने के लिए। तुम्हे पता चलेगा प्रत्येक उदाहरण के तहत कोड स्निपेट तो तुम कर सकते हो ढाल परिवर्तन करें छवि पृष्ठभूमि और यहां तक कि छवि मास्क के लिए.
उदाहरण के लिए, पीएनजी छवि के लिए छवि मास्क का उपयोग एक लोगो के लिए किया जा सकता है, जो एक ढाल के पीछे छिपा हुआ है। इससे आप सृजन कर सकते हैं एक जेएस-एनिमेटेड लोगो जहां ढाल पाठ में धीरे-धीरे परिवर्तन.
ध्यान दें कि यह उदाहरण लेता है बहुत जेएस / सीएसएस कोड की इसलिए यह एक सरल कार्यान्वयन नहीं है.
लेकिन जितना अधिक आप Granim के साथ अभ्यास करेंगे उतना ही आसान यह सेटअप और अनुकूलित करना होगा। और यह एकमात्र सच्चा ढाल संक्रमण पुस्तकालय ऑनलाइन होने के साथ ही यह किसी भी परियोजना के लिए सबसे अच्छा समाधान है.
लाइब्रेरी को अभी भी अर्ध-बार-बार अपडेट किया जाता है ताकि आप अधिक जानकारी के लिए समस्या टैब की जांच कर सकें.
आईटी इस एक बहुत छोटा पुस्तकालय इसलिए बहुत सी चीजें गलत नहीं हैं या अपडेट करने की आवश्यकता नहीं है। यह वही है जो Granim.js को किसी भी साइट के लिए एक विश्वसनीय समाधान बनाता है छोटा या बड़ा.
सेवा मेरे एक प्रति डाउनलोड करें GitHub पर रिलीज़ पृष्ठ पर जाएं या उसकी एक प्रति हड़प लें .js cdnjs से सीधे फ़ाइल। और करने के लिए स्रोत को एक जीवंत उदाहरण पर देखें जोनाथन श्नाइडर द्वारा बनाए गए इस कोडपेन डेमो पर एक नज़र डालें.
