चेकबॉक्स के साथ अपनी खुद की चेकबॉक्स एनीमेशन प्रभाव शैली

हाल ही में एक पोस्ट में, मैंने कस्टम रेडियो बटनों के लिए एक मजेदार एनिमेशन लाइब्रेरी को कवर किया, CSS द्वारा संचालित.

यह मुफ्त पुस्तकालय 720kb द्वारा जारी किया गया था और जल्दी से एक देखा Checkbox.css नामक अनुवर्ती विकल्प. यह इसी तरह से काम करता है, सिवाय इसके HTML चेकबॉक्स को शैलियों और एनिमेट करता है.

यह पुस्तकालय पुस्तकालयों के एक सूट के रूप में आता है तीन अलग-अलग उद्देश्य:

1. Radiobox.css - कस्टम रेडियो एनिमेशन
2. Checkbox.css - कस्टम चेकबॉक्स एनिमेशन
3. Checked.css - शैलियों और मौजूदा चयनित तत्वों (रेडियो और चेकबॉक्स) को एनिमेट करता है

ये सभी एक ही टीम द्वारा विकसित किए गए हैं और वे एक समान तरीके से काम करते हैं। लेकिन आपको करना पड़ेगा प्रत्येक पुस्तकालय को व्यक्तिगत रूप से शामिल करें यदि आप पूर्ण प्रभाव प्राप्त करना चाहते हैं.

इन विशेषताओं में से कुछ को देखने के लिए Checkbox.css GitHub पर एक नज़र डालें और वे कैसे काम करते हैं। डिफ़ॉल्ट रूप से, वे भरोसा करते हैं सीएसएस परिवर्तन के साथ 2 डी रूपांतरित करता है, ब्राउज़र समर्थन पर निर्भर करता है.

इन पुस्तकालयों में से कोई भी जेएस फॉलबैक विधियों के साथ नहीं आता है, इसलिए वे वास्तव में हैं केवल CSS-संचालित एनिमेशन के लिए काम करते हैं. लेकिन, डेमो पेज पर एक त्वरित नज़र आपको अपने पृष्ठ पर इन एनिमेशन को जोड़ने में प्रसन्न होना चाहिए.

प्रक्रिया सरल नहीं हो सकती है और यह कोई कोडिंग ज्ञान के लिए कम करने की आवश्यकता है (हालांकि यह हमेशा कुछ के लिए उपयोगी है).

एक बार CSS स्टाइलशीट आपके पेज पर होने के बाद, बस फॉर्मेट के साथ अपने चेकबॉक्स में एक क्लास जोड़ें चेकबॉक्स-x जहां “एक्स” जो भी एनीमेशन आप चाहते हैं का प्रतिनिधित्व करता है. उदाहरण के लिए, यहाँ के लिए कोड है “छलांग” एनीमेशन प्रभाव:

सबसे अच्छी बात यह है कि यह पुस्तकालय कैसे कर सकता है रेडियो बटन प्रारूप के साथ संयोजन के रूप में काम करते हैं, भी। यदि आप चाहते हैं तो मैं निश्चित रूप से Checked.css लाइब्रेरी की सिफारिश करूंगा मौजूदा चयनित तत्वों को चेतन करें.

इन सभी निर्भरताओं से आपको डरने न दें। बहुत ज्यादा किसी को भी चेकबॉक्स। पुस्तकालय या संबंधित पुस्तकालयों में से किसी एक को स्थापित कर सकते हैं, एक छोटे से कॉपी और चिपकाने के साथ सभी खरोंच से.

और, यदि आपके पास इनपुट एनीमेशन लाइब्रेरी के इस पैक के लिए प्रश्न या सुझाव हैं, तो अपनी साइट के माध्यम से या ट्विटर @ 720kb_ पर रचनाकारों को संदेश देने की कोशिश करें.