Animate.css को अब लगभग कुछ साल हो गए हैं और मुझे पार्टी में काफी देर होने की बात माननी चाहिए। मैंने केवल कुछ सीएसएस एनीमेशन ट्यूटोरियल के लिए नेट की खोज करते समय इसे कुछ महीने पहले ही खोजा था और पाया कि Animate.css के आसपास, चेतन करने का सबसे तेज़, सरल तरीका क्या है।
डैन एडेन नामक एक व्यक्ति द्वारा बनाया गया, Animate.css यह देखने का एक तेज़ तरीका है कि सीसीएस कैसे काम करता है और आपकी वेबसाइट पर कुछ एनीमेशन कार्रवाई करता है।
'जस्ट-ऐड वॉटर सीएसएस एनीमेशन' के रूप में वर्णित एनीमे.एससी एक गंभीर पक्ष के साथ थोड़ा मजेदार है। यह शौकिया वेब डिज़ाइनरों को भी अनुमति देता है जैसे कि खुद सीएसएस एनीमेशन के मूल सिद्धांतों के साथ जल्दी से पकड़ना और वेबसाइटों के लिए सरल लेकिन प्रभावी प्रभाव पैदा करना। एकल एनिमेटेड हेडलाइन से लेकर अधिक संचलन के लिए, यह टूल इसे कर सकता है।
Animate.css
Animate.cs GitHub से डाउनलोड करने के लिए उपलब्ध है और अनिवार्य रूप से एक स्थान पर एकत्र किए गए सरल सीएसएस प्रभावों का पुस्तकालय है। प्रत्येक एनीमेशन अच्छी तरह से पैक किया गया है और उपयोग के लिए तैयार है। आपको केवल वह एनीमेशन ढूंढना है जो आपको पसंद है और कक्षा को लागू करें। वही वास्तव में वहां सबकुछ है।
अगर आप नहीं चाहते हैं कि आपको पूरी लाइब्रेरी डाउनलोड करनी पड़े, तो इसके भीतर 2, 500 लाइनें हैं। आप Animate.css साइट पर जा सकते हैं, एक एनीमेशन पा सकते हैं और डाउनलोड Animate.css लिंक पर क्लिक कर सकते हैं। यह आपको कॉपी करने और उपयोग करने के लिए एक वेब पेज पर कक्षा को लोड करता है जैसा कि आप फिट देखते हैं।
हालांकि GitHub का उपयोग करना आसान है और आप जिस प्रभाव की तलाश कर रहे हैं उसे खोजने के लिए नीचे ड्रिल करें।
- Css GitHub पेज पर नेविगेट करें।
- तत्वों की सूची तक पहुंचने के लिए स्रोत लिंक पर क्लिक करें।
- सूची से जिस प्रभाव प्रकार की तलाश कर रहे हैं उसे चुनें। उछाल एक ध्यान साधक है, इसलिए ध्यान_सेकर्स लिंक का चयन करें।
- Bounce.css चुनें।
- कोड को कॉपी करें और एनीमेशन को लागू करने के लिए इसे अपने पृष्ठ पर रखें।
वास्तव में यह उतना आसान है। आप स्पष्ट रूप से विभिन्न प्रभावों के लिए विभिन्न विकल्पों का चयन करेंगे लेकिन अंतिम परिणाम समान है। पृष्ठ पर भारी उठाने के लिए आवश्यक कोड तक पहुंच।
Animate.css के साथ एक एनिमेटेड ऑब्जेक्ट का निर्माण
Animate.css के साथ कुछ शांत निर्माण सरल है। यह केवल सीसीएस कोड को खोजने और इसे अपने सीएसएस में जोड़ने की बात है। यदि मेरे द्वारा किया जा सकता है, तो कोई भी कर सकता है!
Animate.css पेज पर पहला विकल्प उछाल है, तो आइए इस उदाहरण में उसका उपयोग करते हैं।
- पेस्ट करें ' ' के भीतर अपनी स्टाइलशीट में।
- आप चाहते हैं कि एनीमेशन के लिए सीएसएस का पता लगाएं और इसे उस तत्व में जोड़ें जिसे आप चेतन करना चाहते हैं। उदाहरण के लिए, 'जोड़ें 'परीक्षण, एक छवि या जो कुछ भी करने के लिए उस उछाल प्रभाव को जोड़ने के लिए।
- यह सब काम करने के लिए निम्नलिखित सीएसएस कोड जोड़ें। ऊपर उछाल से लिया गया।
@keyframes का उछाल {
से, 20%, 53%, 80%, से {
एनीमेशन-टाइमिंग-फंक्शन: क्यूबिक-बेज़ियर (0.215, 0.610, 0.355, 1.000);
रूपांतर: Translate3d (0, 0, 0);
}
40%, 43% {
एनीमेशन-टाइमिंग-फंक्शन: क्यूबिक-बेज़ियर (0.755, NAB, 0.855, 0.060);
रूपांतर: Translate3d (0, -30px, 0);
}
70% {
एनीमेशन-टाइमिंग-फंक्शन: क्यूबिक-बेज़ियर (0.755, NAB, 0.855, 0.060);
रूपांतर: Translate3d (0, -15px, 0);
}
90% {
रूपांतर: Translate3d (0, -4px, 0);
}
}
.bounce {
एनीमेशन-नाम: उछाल;
परिवर्तन-उत्पत्ति: केंद्र तल;
}
Animate.css के साथ एनीमेशन को और आगे ले जाना
उपरोक्त अनुक्रम पृष्ठ के पहले लोड होने पर उछाल प्रभाव जोड़ता है, जो कि शांत है, लेकिन एक बार की चीज है। कैसे हम इसे मंडराने के लिए जोड़ते हैं। इस तरह, जब भी कोई परीक्षा से आगे निकल जाता है, वह उछल जाता है। यह ऐसा कुछ नहीं है जो मैं किसी प्रोडक्शन वेबसाइट पर करूंगा, लेकिन यह प्रदर्शित करने का एक शानदार तरीका है कि सब कुछ कैसे काम करता है।
होवर इफेक्ट पर उछाल जोड़ने के लिए अपने सीएसएस में निम्न कोड जोड़ें। हर बार, जब माउस तत्व पर हो जाता है, तो उसे उछाल देना चाहिए।
.सुधार: होवर {
-webkit- एनीमेशन-अवधि: 1s;
-मोज़-एनीमेशन-अवधि: 1 एस;
-ms-एनीमेशन-अवधि: 1s;
-ओ-एनीमेशन-अवधि: 1 एस;
एनीमेशन-अवधि: 1s;
-webkit- एनीमेशन-भरण-मोड: दोनों;
-मोज़-एनीमेशन-फिल-मोड: दोनों;
-ms-एनीमेशन-भरण-मोड: दोनों;
-o- एनीमेशन-भरण-मोड: दोनों;
एनीमेशन-भरण-मोड: दोनों;
}
यदि आप CSS जानते हैं, तो आपको मेरे द्वारा किए गए कार्यों से अलग-अलग प्रभावों को लागू करने के बारे में बहुत बेहतर पता होगा। एक शुरुआत के रूप में, यह और Animate.css में दिए गए पुस्तकालय मुझे अपने वेब पेजों के लिए बुनियादी, लेकिन प्रभावी एनिमेशन बनाने में मदद करते हैं।
मुझे नहीं पता कि मैं एक लाइव वेबसाइट पर कितने का उपयोग करूंगा क्योंकि वे हमेशा बहुत अच्छी तरह से नीचे नहीं जाते हैं और मोबाइल उपयोगकर्ता उन्हें बहुत पसंद नहीं करते हैं। हालाँकि, CSS में एक काम के रूप में और वेब को बढ़ाने के लिए इसका उपयोग कैसे किया जा सकता है, यह एक बेहतरीन संसाधन है। मैं अभी शुरुआत कर रहा हूं, लेकिन इस ट्यूटोरियल के लिए कुछ घंटों का समय चेतन के साथ बिताना भी मुझे बहुत कुछ सिखा गया है। मुझे लगता है कि मैं ऐसा करने से पहले बहुत कुछ खेलूंगा। आप कैसे हैं?
