Shift.css के साथ पूरी तरह से एनिमेटेड विजेट बनाएं

वेब एनीमेशन के लिए एक रास्ता प्रदान करता है लोगों का ध्यान आकर्षित करें तथा उन्हें और आकर्षित करें एक वेबसाइट में। वहाँ बहुत सारे उपकरण हैं मुफ्त एनिमेशन बनाएं परंतु Shift.css गुच्छा में सबसे नए में से एक है.

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

डेमो पेज को शिफ्ट करें जितना मैं शब्दों में समझा सकता हूं उससे कहीं ज्यादा बेहतर आपको दिखा सकता है.

एक बात आप देखेंगे कि कंटेनर के अंदर प्रत्येक तत्व है एक अलग HTML तत्व. चाहे वह एक एसवीजी हो या एक छवि या जो भी हो, आप हर चीज को अलग-अलग कर सकते हैं अपने स्वयं के कस्टम एनीमेशन प्रभाव बनाएँ.

पुस्तकालय दो फ़ाइलों के साथ आता है, a .सीएसएस तथा .js पुस्तकालय, और दोनों की आवश्यकता है आपके दस्तावेज़ प्रमुख में जोड़ा गया.

मुझे इस प्रोजेक्ट के लिए कोई GitHub रेपो नहीं मिल सकता है, इसलिए आपको इसकी आवश्यकता होगी फ़ाइलों को सीधे डाउनलोड करें Shift.css वेबसाइट से.

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

इन वर्गों के साथ, आप भी कर सकते हैं HTML5 डेटा विशेषताएँ जोड़ें यह परिभाषित करने के लिए कि एनीमेशन कैसे काम करता है। अभी केवल तीन हैं लेकिन उन्हें एक पूर्ण एनीमेशन प्रभाव को अनुकूलित करने के लिए पर्याप्त होना चाहिए.

1. डेटा-एनीमेशन: एनीमेशन का नाम
2. डेटा-विलंब: एनीमेशन शुरू होने से पहले कुल देरी (सेकंड में)
3. डेटा-अवधि: एनीमेशन की कुल लंबाई (सेकंड में)

एनीमेशन नाम एक होने की जरूरत है पूर्वनिर्धारित एनीमेशन शिफ्ट लाइब्रेरी के लिए बनाया गया। अभी हैं से चुनने के लिए 15 एनीमेशन नाम. आप उन्हें Shift.css मुखपृष्ठ के नीचे सूचीबद्ध देख सकते हैं.

केवल कॉपी पेस्ट जो तुम्हे चाहिये एनीमेशन नाम सेटिंग में और आप जाने के लिए अच्छा होना चाहिए! उदाहरण के लिए, अगर मैं निकास फीका एनीमेशन का उपयोग करना चाहता था, तो मैं जोड़ूंगा डेटा-एनीमेशन = "shift_exitFade" एक डेटा के रूप में जो भी तत्व को उस तरह से चेतन करना चाहिए। बहुत आसान.

मैं चाहता हूं कि यह पुस्तकालय जावास्क्रिप्ट में अधिक विकल्पों के साथ आए क्योंकि इससे डेवलपर्स को प्लेसमेंट और सुविधाओं पर इतना अधिक नियंत्रण मिलेगा। लेकिन एक साधारण (और मुफ्त) एनीमेशन फ्रेमवर्क के लिए मैं शिकायत नहीं कर सकता.

Shift.css के लिए एकदम सही है नए डेवलपर्स जो बनाना चाहते हैं अधिक जटिल एनीमेशन शैलियों स्क्रैच से वर्बोस कोड लिखे बिना.