कूल स्क्रॉलिंग प्रभाव के लिए जावास्क्रिप्ट लाइब्रेरी

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

जब कोई उपयोगकर्ता आपके वेबपृष्ठ को स्क्रॉल करता है, तो कार्रवाई विभिन्न प्रकार के एनीमेशन विकल्पों को ट्रिगर करने के लिए डिज़ाइन किया जा सकता है जैसे फीका प्रभाव, धुंधला, 3 डी, लंबन, और बहुत कुछ। यहां 25 जेएस लाइब्रेरी हैं जो आपकी साइट डिजाइन में उस प्रकार की प्रतिक्रिया प्राप्त करने में आपकी सहायता कर सकती हैं.

खुलासा खुलासा

एक पुस्तकालय जो वेब और मोबाइल दोनों के लिए स्क्रॉल एनीमेशन जोड़ना आसान बनाता है। आप कस्टम सहजता, 3 डी घुमाव, अवधि और कई नैतिक मापदंडों को उस तत्व पर सेट कर सकते हैं जिसे आप चेतन करना चाहते हैं.

निर्भरता: कोई नहीं | आकार: 2.9kb | लाइसेंस: एमआईटी

Aniview

एक प्लगइन जो एनिमेट.सीएसएस के साथ मिलकर काम करता है, केवल आपके तत्व के व्यूपोर्ट में आने पर एनिमेशन को सक्षम करता है.

निर्भरता: jQuery | आकार: 1kb | लाइसेंस: एन / ए

देखने में फीका

एक प्लगइन जो तत्वों में / बाहर प्रभाव को फीका जोड़ता है जब वे पूर्व निर्धारित व्यूपोर्ट में प्रवेश करते हैं या बाहर निकलते हैं.

निर्भरता: jQuery | आकार: 3.81kb | लाइसेंस: एन / ए

वाह

WOW स्क्रॉल इवेंट पर Animate.css एनिमेशन प्रकट करेगा। आप HTML मार्कअप से एनीमेशन की अवधि, देरी, ऑफसेट और पुनरावृत्तियों को सेटअप कर सकते हैं, फिर जेएस के तत्व तत्व को कॉल करें.

निर्भरता: Animate.css | आकार: 8.23kb | लाइसेंस: एमआईटी

ScrollMagic

जब कोई उपयोगकर्ता पृष्ठ को स्क्रॉल करता है तो यह प्लगइन एक 'जादुई' प्रभाव दिखाएगा। यह स्क्रॉल करने की स्थिति के आधार पर, किसी तत्व को पिन करना, या CSS वर्ग को टॉगल करने के लिए एकदम सही है। स्क्रॉलमाजिक एक एनीमेशन दृश्य बनाने में GSAP और वेलोसिटीज के साथ मिलकर काम कर सकता है। यहां देखें पूरा डेमो.

निर्भरता: jQuery, GSAP, वेलोसिटी.जेएस | आकार: 16.9kb | लाइसेंस: एमआईटी

jScrollability

jScrollability आपको जटिल स्क्रॉल-आधारित एनिमेशन के साथ एकल वेब पेज बनाने देता है। उपयोगकर्ता के क्रॉल होने पर, तत्व स्क्रॉल पदों के आधार पर चेतन करेगा। एनिमेशन स्क्रॉल गहराई के आधार पर चलते हैं, और निश्चित रूप से आप एनीमेशन की शुरुआत और अंत सेट कर सकते हैं.

निर्भरता: jQuery | आकार: 1.86kb | लाइसेंस: एमआईटी

pushIn.js

उपयोगकर्ता द्वारा पृष्ठ के माध्यम से स्क्रॉल करने पर काम करने वाले किसी भी तत्व में डॉली-इन या पुश-इन प्रभाव को जोड़ने के लिए एक साधारण पुस्तकालय। इसे लागू करना आसान है: बस प्रारंभ, रोक और गति मापदंडों को जोड़ें डेटा-पैरामीटर अपने HTML तत्व के लिए.

निर्भरता: कोई नहीं | आकार: 4.94kb | लाइसेंस: एन / ए

Scrollissimo

चिकनी स्क्रॉल नियंत्रित एनिमेशन जोड़ने के लिए यह एक JS लाइब्रेरी है। यह ग्रीन्सॉक की चिमटी और समयरेखा का उपयोग चिकनी एनिमेशन उत्पन्न करने के लिए करता है.

निर्भरता: ग्रीनशॉक ट्विनलाइट / ट्वीनमैक्स | आकार: 2.94kb | लाइसेंस: एन / ए

jQuery के एनीमेशन स्क्रॉल प्लगइन

Greensock का उपयोग करके व्यूपोर्ट-ट्रिगर एनीमेशन जोड़ने के लिए यह एक jQuery प्लगइन है। यह सहजता, परिवर्तन, पैमाने, रोटेशन और 3 डी एनिमेशन के साथ चेतन तत्वों को आसान बनाता है.

निर्भरता: jQuery, GreenShock | आकार: 14kb | लाइसेंस: जीएनयू जी.पी.एल.

Circlr

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

निर्भरता: कोई नहीं | आकार: 6.05kb | लाइसेंस: एमआईटी

Scrollimator

स्क्रॉलिमेटर आपको स्थिति और स्क्रॉल प्रगति दिखाएगा, और मान लौटाएगा जिसका उपयोग आप उपयोगकर्ता स्क्रॉलिंग व्यवहार से जुड़ी ट्विन एनिमेशन को बदलने के लिए कर सकते हैं। यह ऊर्ध्वाधर और क्षैतिज स्क्रॉलिंग का समर्थन करता है.

निर्भरता: कोई नहीं | आकार: 37.7kb | लाइसेंस: एन / ए

क्रॉसफ़ेड

क्रॉसफेड ​​एक छवि के लिए क्रॉसफेड ​​प्रभाव को जोड़ने के लिए एक प्लगइन है। उपयोगकर्ता द्वारा और नीचे स्क्रॉल किए जाने पर धुंधली प्रभाव जारी रहेगा.

निर्भरता: jQuery | आकार: 3.19kb | लाइसेंस: एमआईटी

पेज स्क्रॉल प्रभाव

यह एक CodyHouse द्वारा बनाई गई प्रयोगात्मक पृष्ठ स्क्रॉल प्रभाव के लिए एक पुस्तकालय है। इसका सदुपयोग करता है velocitey.js एनिमेशन.

निर्भरता: jQuery, वेलोसिटी.जेएस | आकार: 17.6kb | लाइसेंस: एन / ए

jquery.parallax-पुस्तक

यह लाइब्रेरी आपको लंबवत पृष्ठ स्क्रॉलिंग के लिए एक लंबन प्रभाव को जोड़ने की अनुमति देती है। बस jQuery और jquery.easing.1.3.js आयात करें, फिर जोड़ें 'डेटा-लंबन' प्रभाव को अनुकूलित करने के लिए अपने तत्व के लिए विशेषता और वैकल्पिक संरक्षक.

निर्भरता: jQuery, jQuery.easing | आकार: 8.72kb | लाइसेंस: जीएनयू जी.पी.एल.

parallax.js

Parallax.js एक सरल प्लगइन है जो Spotify वेबसाइट द्वारा प्रेरित लंबन स्क्रॉलिंग प्रभाव को जोड़ता है.

निर्भरता: jQuery | आकार: 6.63kb | लाइसेंस: एमआईटी

Enllax

Enllax किसी भी स्क्रॉलिंग तत्व पर लंबन प्रभाव को लागू करने के लिए उपयोग करने के लिए एक सुपर लाइटवेट लाइब्रेरी है। आप पृष्ठभूमि या अग्रभूमि तत्वों को सेट कर सकते हैं हवलदार प्रभाव। यह ऊर्ध्वाधर और क्षैतिज स्क्रॉलिंग दोनों के लिए काम करता है.

निर्भरता: jQuery | आकार: 1.53kb | लाइसेंस: एमआईटी

स्क्रॉल पर धुंधला

यह लाइब्रेरी आपको एक इमेज में ब्लर इफेक्ट जोड़ने में मदद करती है, जिसे पेज स्क्रॉलिंग द्वारा ट्रिगर किया जाएगा। आप पृष्ठ को जितना गहरा स्क्रॉल करते हैं, छवि उतनी ही धुंधली होती जाती है.

निर्भरता: कोई नहीं | आकार: 1.1kb | लाइसेंस: एन / ए

boxLoader

बॉक्स स्क्रॉल पेज पर तत्वों को लोड करने के लिए एक सरल प्लगइन है। आपके द्वारा निर्धारित पैरामीटर दिशाओं (x या y), प्रतिशत पर स्थिति, प्रभाव और अवधि भी हैं.

निर्भरता: jQuery | आकार: 3.42kb | लाइसेंस: एन / ए

झुका हुआ पृष्ठ स्क्रॉल

जैसे ही उपयोगकर्ता पृष्ठ के माध्यम से स्क्रॉल करता है, यह प्लगइन आपके द्वारा सेट किए गए तत्व के लिए एक भयानक 3D झुका हुआ प्रभाव प्रकट करेगा.

निर्भरता: jQuery | आकार: 1.5kb | लाइसेंस: जीएनयू जी.पी.एल.

AhRelax

AhRelax त्वरित स्क्रॉल-आधारित एनिमेशन बनाने का एक तरीका प्रदान करता है। यह लेजीवेट है और इसमें शानदार प्रदर्शन भी है। आप इसके बारे में यहां और अधिक पढ़ सकते हैं.

निर्भरता: jQuery | आकार: 1.6kb | लाइसेंस: एमआईटी

फैंसी स्क्रॉल

यदि आप कभी भी Android या iOS पर ओवरफ्लो स्क्रॉल प्रभाव देखते हैं, तो इस प्लगइन के साथ अब आप इसे अपनी साइट पर लागू कर सकते हैं। जब कोई उपयोगकर्ता पृष्ठ के ऊपर / नीचे पहुँचता है, तो आप एनीमेशन, या तो उछाल या चमक जोड़ सकते हैं.

निर्भरता: jQuery | आकार: 2.64kb | लाइसेंस: जीएनयू जी.पी.एल.

लंबन छवि स्क्रॉल

यह प्लगइन तत्वों को फ्लोट करेगा और उपयोगकर्ता के पेज को नीचे या ऊपर स्क्रॉल करेगा.

निर्भरता: jQuery | आकार: 8.69kb | लाइसेंस: एमआईटी

Rlsmooth

जब कोई उपयोगकर्ता पेज को नीचे या ऊपर दबाता है तो प्रवाह प्रभाव बनाने के लिए यह एक छोटा सा प्लगइन है। उपलब्ध तीन प्रभाव हैं: स्लाइड, फीका और शो.

निर्भरता: jQuery | आकार: 1.95kb | लाइसेंस: एमआईटी

Scrollme

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

निर्भरता: jQuery | आकार: 5.45kb | लाइसेंस: एन / ए

लंबन इमेजस्क्रोल

यह प्लगइन आपको अपने पृष्ठ पर किसी भी छवि को एक लंबन प्रभाव देने की अनुमति देता है। यह प्रभाव काम करने के लिए CSS3 के ट्रांसफॉर्म का उपयोग करता है। इस प्लगइन में jQuery और AMD के लिए समर्थन है.

निर्भरता: jQuery | आकार: 8.01kb | लाइसेंस: एमआईटी