2020 में उपयोग करने के लिए 10+ सर्वश्रेष्ठ जावास्क्रिप्ट एनिमेशन लाइब्रेरी

2020 में उपयोग करने के लिए 10+ सर्वश्रेष्ठ जावास्क्रिप्ट एनिमेशन लाइब्रेरी

2020 में उपयोग करने के लिए 10+ सर्वश्रेष्ठ जावास्क्रिप्ट एनिमेशन लाइब्रेरी
СОДЕРЖАНИЕ
02 июня 2020

सर्वश्रेष्ठ जावास्क्रिप्ट एनिमेशन लाइब्रेरी


यदि आप अपनी वेबसाइट आगंतुक का ध्यान आकर्षित करना चाहते हैं, तो एनिमेशन से बेहतर क्या हो सकता है? वेब पर स्वतंत्र रूप से उपलब्ध कई एप्लिकेशन इंजनों का उपयोग करके, आप आसानी से अपनी वेबसाइट के तत्वों को फीका, उछाल या जोश में ला सकते हैं। आज की पोस्ट में, हम देखेंगे जावास्क्रिप्ट एनिमेशन लाइब्रेरी कैसे मदद कर सकती है उस सब के साथ.

सबसे पहले, जावास्क्रिप्ट एनिमेशन के बारे में थोड़ा

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

फिर भी, जावास्क्रिप्ट उन चीजों को संभाल सकता है जो CSS नहीं कर सकते हैं। यह डेवलपर्स को जटिल एनिमेशन को नियंत्रित करने के लिए और अधिक शक्ति प्रदान करता है जो कई चलती भागों को समन्वयित करने की आवश्यकता होती है.

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

सबसे अच्छा जावास्क्रिप्ट एनीमेशन पुस्तकालयों

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

1. Anime.js

जावास्क्रिप्ट एनीमेशन पुस्तकालय: Anime.js

आइए जावास्क्रिप्ट एनीमेशन पुस्तकालयों की इस सूची को Anime.js के साथ शुरू करें। यह लाइटवेट एनीमेशन लाइब्रेरी 35K + सितारों को देखता है GitHub. एकल शक्तिशाली एपीआई से कार्य करना, आप इसका उपयोग HTML, CSS, JS, SVG और DOM विशेषताओं को एनिमेट करने के लिए कर सकते हैं। एक अंतर्निहित चौंका देने वाली प्रणाली के साथ, यह तरंगों का निर्माण कर सकता है, दिशात्मक आंदोलनों, अनुवर्ती और अतिव्यापी प्रभाव सरल दिखाई देते हैं। यह प्रणाली समय और गुणों दोनों पर प्रयोग करने योग्य है.

अंतर्निहित कॉलबैक और नियंत्रण कार्यों का उपयोग करके आप बहुत कुछ कर सकते हैं। उदाहरण के लिए, आप सिंक में खेल, ठहराव, नियंत्रण, रिवर्स और ट्रिगर इवेंट खेल सकते हैं। यह देखने के लिए कि इस लाइब्रेरी का उपयोग करना और क्या संभव है, आप जा सकते हैं Codepen.

2. Velocity.js

Velocit.js

Velocity.js jQuery और CSS बदलाव का सबसे अच्छा संयोजन करता है। यह 17K सितारों के करीब है GitHub और व्हाट्सएप और मेलचैंप जैसे प्रमुख उपयोगकर्ताओं का दावा करता है। लूपिंग, पीछे हटना, देरी करना, तत्वों को छिपाना / दिखाना, गुण गणित (+, -, *, /), और हार्डवेयर त्वरण, सभी रूप सुविधाएँ.

आप ब्राउज़र विंडो स्क्रॉल करने के लिए Velocity.js का उपयोग कर सकते हैं। यह आपके ब्राउज़र में लोड किए गए jQuery और इसके स्वतंत्र दोनों के साथ काम कर सकता है, और पिछले एनिमेशन को भी पूर्ववत कर सकता है.

3. Popmotion

Popmotion

के करीब है 18K सितारों, पॉपमिशन किसी भी जावास्क्रिप्ट वातावरण के लिए एक कार्यात्मक एनीमेशन पुस्तकालय है। यह किसी भी API के साथ काम कर सकता है जो कि React, Three.js, A-Frame और PixiJS जैसे इनपुट्स के नंबरों को स्वीकार करता है.

पॉपमोशन का वजन केवल 11.7kB है, लेकिन फिर भी एक पंच पैक करता है। यह कई उदाहरणों और अधिक सिंक्रनाइज़ करने के लिए कीफ़्रेम, क्षय, समयरेखा जैसे एनिमेशन पेश करता है। आप एनिमेशन या फ़ंक्शंस की किसी भी श्रृंखला को डगमगा सकते हैं, साथ ही अपने स्वयं के कॉन्फ़िगरेशन को बनाने के लिए शुद्ध कार्यों का उपयोग कर सकते हैं.

4. Three.js

जावास्क्रिप्ट एनीमेशन पुस्तकालयों: तीन .js

60. + सितारों के साथ जावास्क्रिप्ट एनीमेशन पुस्तकालयों की इस सूची में तीन.js सबसे ऊपर हैं GitHub. यह पर निर्भर है WebGL ब्राउज़र में 3D एनिमेशन बनाने और रेंडर करने के लिए.

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

5. ग्रीनसॉक जेएस

GreenSock

ग्रीनस्कॉक का जीएसएपी छोटी जावास्क्रिप्ट फाइलों के एक सेट के साथ काम करता है जो एनिमेशन को सभी प्रमुख ब्राउज़रों में शानदार बनाते हैं। यह आसानी से कई एनीमेशन गुणों को जंजीर देता है और ब्राउज़र बग को समाप्त करता है.

जीएसएपी की कार्रवाइयों में कैनवस पर एनिमेशन बनाना और किसी दृश्य में किसी ऑब्जेक्ट को एनिमेट करना शामिल है। किसी पथ के साथ उत्तरोत्तर रूप से प्रकट होना, मॉर्फ करना या बढ़ना। इस उद्देश्य के लिए, यह SVGPlugins, PixiPlugin, WebGL, Adobe Animate और EaseJS जैसे सॉफ़्टवेयर अनुप्रयोगों के एक समूह के साथ काम करता है। इसकी मॉड्यूलर संरचना आपको उन कार्यों को चुनने में मदद करती है जिनकी आपको ज़रूरत है। 8 मिलियन उपयोगकर्ताओं और 10K + सितारों के साथ GitHub, इस शक्तिशाली पुस्तकालय में इसके लिए बहुत कुछ है.

6. AniJS

AniJS

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

पर GitHub, AniJS में 3.5K से अधिक सितारे हैं। यह किसी भी तीसरे पक्ष के पुस्तकालय पर निर्भर नहीं करता है और आम तौर पर विकास को गति देने में मदद करता है। यह एंड्रॉइड और iOS पर भी काम करता है, और सभी लोकप्रिय ब्राउज़रों में भी.

7. Mo.js

Mo.js

मोशन ग्राफिक्स में एनिमेशन में खेलने के लिए एक बड़ा हिस्सा है, और Mo.js एक विकल्प है जिसके साथ आप एक प्रभाव बना सकते हैं। कई ट्यूटोरियल और डेमो मदद करने के लिए, शुरुआती को डॉट के लिए ज्यामितीय आकार और समय एनिमेशन बनाने में मुश्किल नहीं हो सकती है.

एपीआई सरल दिखाई दे सकते हैं, लेकिन बहुत कुछ है जो आप उनके साथ कर सकते हैं। टूलकिट के भीतर, आपको अपने एनिमेशन बनाने के लिए एक कर्व एडिटर और टाइमलाइन एडिटर मिलेंगे, साथ ही एक खिलाड़ी को अपने एनिमेशन को नियंत्रित करने में मदद मिलेगी। लड़खड़ाहट, सहजता, समयरेखा और अधिक के लिए अलग-अलग मॉड्यूल हैं। यह सब 16K सितारों के करीब Mo.js कमाता है GitHub.

8. Vivus.js

जावास्क्रिप्ट एनीमेशन पुस्तकालयों: विवस

यदि आप वास्तविक समय में स्क्रीन पर एक पेन ड्रॉइंग की नकल करना चाहते हैं, तो आप विवस के साथ मार्क को हिट करेंगे। यह आपको आकर्षित होने का आभास देने वाले SVG को चेतन करने देता है। चूंकि इसकी कोई निर्भरता नहीं है, इसलिए यह तेज़ और हल्का है.

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

9. स्क्रैचेवल जेएस

ScrollReveal

यदि आप अपने वेब तत्वों को देखना चाहते हैं, जैसा कि वे स्क्रॉल करते हैं, तो स्क्रॉलरेल ने निराश नहीं किया। एनीमेशन लाइब्रेरी सीखने में आसान शून्य निर्भरता और 18.5K + तारे हैं GitHub.

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

10. Typed.js

Typed.js

Typed.js आपकी स्क्रीन पर टाइपिंग करने के लिए एक सरल पुस्तकालय (एक प्लगइन का, वास्तव में) है। एक बार जब आप किसी भी स्ट्रिंग को दर्ज करते हैं, तो एक आगंतुक इसे निर्धारित गति से टाइप किया जा सकता है। इतना ही नहीं, आप बैकस्पेस बटन पर काम कर सकते हैं, साथ ही एक नया वाक्य भी शुरू कर सकते हैं। यदि आप JS के साथ आने वाले आगंतुकों को भी इसे देखने की अनुमति देना चाहते हैं, तो आपको बस पृष्ठ पर HTML div लगाने की आवश्यकता है। इस तरह, बॉट और सर्च इंजन को टाइप किए गए शब्द भी देखने को मिलते हैं.

इस लाइब्रेरी की दर 9.5K + सितारों पर है GitHub. बिजली उपयोगकर्ताओं में स्लैक और एनवाटो शामिल हैं.

1 1. AirBnB द्वारा आकर्षक

जावास्क्रिप्ट एनीमेशन लाइब्रेरी: लोटी

Lottie एक हल्का एनिमेटेड ग्राफिक्स प्रारूप है जो उन्हें प्रदान करने की लागत के खिलाफ उच्च गुणवत्ता वाले ग्राफिक्स को संतुलित करता है। यह अनुप्रयोगों को छोटा बनाता है और इसमें गतिशील विशेषताएं शामिल हैं। इसका उपयोग अतिरिक्त सॉफ्टवेयर की आवश्यकता के बिना वेब, एंड्रॉइड, आईओएस और आईओटी के लिए किया जा सकता है.

Lottie जावास्क्रिप्ट का समर्थन करने वाले किसी भी ब्राउज़र पर चल सकता है। एनिमेशन सादे पाठ में संग्रहीत हैं और मानव पठनीय हैं। चूंकि टेक्स्ट डेटा को JSON प्रारूप में संग्रहीत किया जाता है, इसलिए यह किसी भी जावास्क्रिप्ट वातावरण के साथ आसानी से आत्मसात कर लेता है। यह मोबाइल के खर्च को बढ़ाने के लिए एक लोकप्रिय एनिमेटेड ग्राफिक्स प्रारूप बनाता है। अकेले एंड्रॉइड वर्जन में 30K के करीब स्टार्स मिलते हैं GitHub.

यदि आप JavaSCript एनीमेशन पुस्तकालयों की इस सूची के अंत तक पहुँच गए हैं, तो आप अन्य जावास्क्रिप्ट पुस्तकालयों और रूपरेखाओं को देखने के लिए भी इच्छुक हो सकते हैं। या, इन सर्वोत्तम रिएक्ट यूआई घटक पुस्तकालयों की जांच करें.

अपनी वर्डप्रेस साइट को गति देने पर हमारे क्रैश कोर्स में शामिल होना न भूलें। कुछ सरल सुधारों के साथ, आप अपने लोडिंग समय को 50-80% तक कम कर सकते हैं:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector