10 CSS3 एनीमेशन उपकरण आपको बुकमार्क करना चाहिए

जैसे-जैसे लोग चीजों को स्थानांतरित करने में आसानी से महसूस करते हैं, चालाकी से उपयोग किए गए एनिमेशन साइट के उपयोगकर्ता अनुभव को बढ़ा सकते हैं महत्वपूर्ण तत्वों पर ध्यान आकर्षित करना उपयोगकर्ताओं को जल्दी से नोटिस करने की आवश्यकता है.

CSS3 ने एक नया एनीमेशन सिंटैक्स पेश किया है जो आपके डिजाइनों में कई दिलचस्प चीजें हासिल करने में आपकी मदद कर सकता है। शांत एनिमेशन का निर्माण कभी-कभी जटिल और समय लेने वाला हो सकता है, हालांकि, जब एनिमेटोन लाइब्रेरी और जनरेटर का उत्कृष्ट उपयोग किया जा सकता है.

CSS के साथ संभव किए गए कुछ एनिमेशन देखें:

• 38 प्रेरणादायक CSS3 एनीमेशन डेमो
• 15 सुंदर पाठ प्रभाव सीएसएस के साथ बनाया गया
• 30 कूल सीएसएस एनिमेशन आपको देखने हैं
• CSS3 एनीमेशन के साथ उछाल प्रभाव कैसे बनाएं

इस पोस्ट में हम 10 शानदार उपकरणों पर एक नज़र डालेंगे जो आपके स्वयं के एनिमेशन बनाने में आसान और तेज़ बना सकते हैं.

1. CSS3Gen CSS3 एनीमेशन जनरेटर

CSS3Gen आपको एक आसानी से उपयोग होने वाला एनीमेशन जनरेटर प्रदान करता है जो आपको बुनियादी एनिमेशन जल्दी से उत्पन्न करने की अनुमति देता है। यद्यपि आप इस उपकरण के साथ जटिल कलाकृतियां नहीं बनायेंगे, लेकिन यदि आप बहुत अधिक उपद्रव के बिना एक मानक एनीमेशन बनाना चाहते हैं तो यह एक बढ़िया विकल्प है.

आप कोड से अपने हाथों को गंदा नहीं करना है, जैसा कि आप गुणों को फ़ॉर्म पर सेट कर सकते हैं, परिणाम का पूर्वावलोकन कर सकते हैं, फिर कोड को अपनी सीएसएस फ़ाइल में कॉपी और पेस्ट कर सकते हैं.

2. सीएसएस चेतन

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

उदाहरण एनिमेशन भी हैं, जैसे कि “उछाल”, “शेक”, तथा “झूला”, कि आप जनरेटर में लोड कर सकते हैं, और अपनी आवश्यकताओं के अनुसार कोड को संशोधित कर सकते हैं.

3. सीएसएस एनीमेशन जेनरेटर को समतल करना

Covelopingएनीमेशन जनरेटर शायद सबसे अच्छा विकल्प है यदि आप CSS3 एनिमेशन के साथ नए हैं, और जल्दी से समझना चाहते हैं कि वे कैसे काम करते हैं। यह सरल लेकिन शक्तिशाली उपकरण आपको विभिन्न प्रकार के एनिमेशन का परीक्षण करने की अनुमति देता है CSS3 की पेशकश की है, और आसानी से जांच करें कि उनके बीच क्या अंतर है.

आपको केवल 4 पैरामीटर सेट करने होंगे: एनीमेशन प्रकार, एनीमेशन फ़ंक्शन, सेकंड में अवधि, और यदि एनीमेशन अनंत है। जब आप तैयार हो जाते हैं, तो आपको केवल जेनरेट किए गए HTML और CSS कोड को प्राप्त करना होगा.

4. मैजिक एनिमेशन

जादू एनिमेशन एक शांत सीएसएस पुस्तकालय है जो इसे संभव बनाता है विशेष प्रभावों के साथ आसानी से एनिमेशन रखें अपनी साइट पर उदाहरण के लिए, आप तत्वों को अंदर और बाहर गायब कर सकते हैं, बाएं या दाएं से खोल सकते हैं, फिर वापस आ सकते हैं, नीचे, ऊपर, बाएं या दाएं घूम सकते हैं, और कई अन्य

आपको बस कोड डाउनलोड करना है, CSS फ़ाइल को अपने HTML पेज में शामिल करना है, और निम्न तरीके से jQuery की मदद से उपयुक्त वर्ग जोड़ना है:

 $ ('। yourdiv')। होवर (फंक्शन () $ (यह) .addClass ('मैजिमिम पफ इन'););

आप टाइमर की सेटिंग भी बदल सकते हैं, और एनीमेशन को jQuery की मदद से अनंत बना सकते हैं (अधिक जानकारी के लिए readme फ़ाइल देखें).

5. animate.css

Animate.css आपको एक सेट प्रदान करता है शांत, क्रॉस-ब्राउज़र CSS3 एनिमेशन. एनिमेशन को समूहों में बांटा गया है जैसे अटेंशन सीकर्स, बाउंसिंग एंट्रेंस, बाउंसिंग एग्जिट्स, फेडिंग एंट्रेंस और कई अन्य, इसलिए आप वास्तव में पसंद की कमी के बारे में शिकायत नहीं कर सकते.

आप Github से कोड डाउनलोड कर सकते हैं, फिर आपको केवल अपने HTML पेज पर CSS फ़ाइल को जोड़ना होगा, और संबंधित HTML कक्षाओं को उन HTML तत्वों से जोड़ना होगा जिन्हें आप चेतन करना चाहते हैं।.

6. बाउंस.जेएस

Bounce.js एक आसान जावास्क्रिप्ट पुस्तकालय है जो आपको सक्षम बनाता है जटिल एनिमेशन बनाएं. Bounce.js में एक परिपक्व उपयोगकर्ता इंटरफ़ेस है जो आपको या तो विभिन्न घटकों को जोड़ने की अनुमति देता है - जैसे कि सहजता, अवधि, विलंब, और बाउंस की संख्या - मैन्युअल रूप से अपने एनीमेशन पर, या एक तैयार-से-उपयोग प्रीसेट का चयन करें, फिर एनीमेशन खेलें, और यदि आवश्यक हो तो गुणों को ठीक से ट्यून करें.

7. एआईजेएस

AniJS एक सुपरकूल जावास्क्रिप्ट लाइब्रेरी है जो आपको CSS3 एनिमेशन को अपने डिजाइनों में, और से जोड़ने की अनुमति देता है परिष्कृत UI घटक बनाएँ जैसे कि एनिमेटेड टैब, अकॉर्डियन, मोडल्स, स्लाइडिंग मेन्यू, मोबाइल ऐप नोटिफिकेशन, स्क्रॉल रिवील और कई अन्य.

यह आईओएस और एंड्रॉइड सहित सभी आधुनिक ब्राउज़रों के साथ काम करता है, किसी भी तीसरे पक्ष के पुस्तकालयों की आवश्यकता नहीं है, और एक शानदार शोकेस है जिसका नाम है AniCollection जहां आप आसानी से पुस्तकालय द्वारा प्रदान किए गए विभिन्न प्रभावों के साथ प्रयोग कर सकते हैं.

8. एकल तत्व सीएसएस स्पिनर

क्या आप कभी भी अपने डिजाइनों को बढ़ाना चाहते हैं एनिमेटेड लोडिंग स्पिनर? यदि उत्तर हां है, तो यह प्यारा सीएसएस स्पिनर पुस्तकालय आपके लिए एक उत्कृष्ट विकल्प हो सकता है। स्पिनरों के लिए CSS कोड LESS में लिखा गया है। कोई भी सेटिंग नहीं है, कोड तैयार है, आपको केवल इसे अपने HTML और CSS फाइलों में डालना है.

9. ओडोमीटर

ओडोमीटर एक शानदार उपकरण है अपनी साइट पर शांत एनिमेटेड मीटर रखें. यह एक सीएसएस और जावास्क्रिप्ट पुस्तकालय है, सीएसएस भाग को सैस में लिखा गया है, और आप विभिन्न विषयों जैसे कि से चुन सकते हैं “डिजिटल”, “रेलवे स्टेशन”, तथा “गाड़ी”.

ओडोमीटर का उपयोग करने के लिए, आपको अपने HTML पृष्ठ पर जावास्क्रिप्ट फ़ाइल और चुनी हुई थीम फ़ाइल को जोड़ना होगा, फिर ए वर्ग = "ओडोमीटर" उस तत्व का चयन करना जिसे आप एक एनिमेटेड मीटर में बनाना चाहते हैं। नेत्रहीन रूप से डेटा का प्रतिनिधित्व करने, या बनाने के लिए आदर्श विकल्प “जल्द आ रहा है” पेज अधिक आंख को पकड़ने वाला.

10. Snabbt.js

Snabbt.js एक अतिसूक्ष्म एनिमेशन लाइब्रेरी है आपको चीजों को आसानी से घुमाने में मदद करता है. यदि आपको थोड़ी प्रेरणा की आवश्यकता है, तो इस स्मार्ट एनीमेशन टूल के साथ आप क्या हासिल कर सकते हैं, यह देखने के लिए डेमो पर एक नज़र डालें, नीचे स्क्रीनशॉट पर एनिमेटेड आवर्त सारणी सिर्फ कई संभावनाओं में से एक है Snabbt.js को लागू करना आसान बनाता है.

यदि आप इस पुस्तकालय का उपयोग करना चाहते हैं, तो आपको थोड़ा जावास्क्रिप्ट लिखने की आवश्यकता है, लेकिन जैसा कि परिणाम काफी शानदार है, इसलिए यह संभवतः परेशानी के लायक है.