CascadeJS के साथ आसानी से कैस्केडिंग प्रभाव बनाएं

फैंसी एनिमेशन वेब पर एक दर्जन से अधिक हैं। वे अविश्वसनीय के टन के साथ बनाने के लिए आसान हो रहे हैं एनिमेशन लाइब्रेरी.

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

इस लाइब्रेरी में है कोई निर्भरता नहीं; यह क्लासिक जावास्क्रिप्ट पर चलता है। आप इसे npm, Bower के माध्यम से या GitHub से कॉपी कॉपी डाउनलोड करके स्थापित कर सकते हैं.

CascadeJS काम करने के लिए, आप दो फाइलों की जरूरत है: एक सीएसएस फ़ाइल और एक जावास्क्रिप्ट फ़ाइल। वे दोनों साथ आते हैं कीमा बनाया हुआ संस्करण पृष्ठ आकार पर कुछ KB को बचाने के लिए.

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

लेकिन, आप की आवश्यकता होगी की स्थापना की बहे() समारोह अपनी फ़ाइल में, जो भी तत्व आप को चेतन करना चाहते हैं, लक्ष्य करने के बाद.

आप वास्तव में कर सकते हैं jQuery का उपयोग करें यदि आप चाहें तो इस लाइब्रेरी के साथ आवश्यक नहीं. इसलिए, यदि आप jQuery के साथ तत्वों का चयन करना पसंद करते हैं, तो इसके बजाय बेझिझक उपयोग करें.

यहाँ एक है वेनिला जावास्क्रिप्ट का स्निपेट मुख्य साइट के डेमो से:

आप पास कर सकते हैं बहे() के साथ तत्व कोई पैरामीटर नहीं, या आप कर सकते हो उन सभी को कॉन्फ़िगर करें स्वयं। यह आठ वैकल्पिक पैरामीटर एनीमेशन शैली, समय, अवधि और वैकल्पिक CSS कक्षाओं के संपादन के लिए.

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

सब कोड के नमूने मुख्य पुस्तकालय पृष्ठ पर खुले रूप से उपलब्ध हैं, इसलिए आप अपने दम पर कॉपी / पेस्ट और टिंकर कर सकते हैं। लेकिन, आप भी पाएंगे प्रलेखन GitHub पृष्ठ पर यदि आप आरंभ करने के लिए एक स्पष्ट तरीके की तलाश कर रहे हैं.