10 सर्वश्रेष्ठ लंबन स्क्रॉलिंग प्लगइन्स

• 2019

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

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

अस्वीकरण : शुरू करने से पहले, ध्यान दें कि इन प्लगइन्स का उपयोग करने के लिए कुछ वेब तकनीकों (HTML / CSS / Javascript) का ज्ञान आवश्यक है। अधिकांश सूचीबद्ध प्लगइन्स jquery का उपयोग करते हैं, इसलिए Jquery के ज्ञान की भी आवश्यकता हो सकती है।

लंबन स्क्रॉलिंग प्लगइन्स

1. स्क्रॉल

स्क्रॉलमैजिक वहां से सबसे लोकप्रिय और फीचर से भरपूर जेकरी प्लगइन्स में से एक है। यह एक जावास्क्रिप्ट पुस्तकालय आपको प्रतीत होता है कि जादुई स्क्रॉल प्रभाव बनाने देता है। स्क्रॉलमाजिक का उपयोग करके आप अपनी स्क्रॉल स्थिति के आधार पर चेतन कर सकते हैं। इसका मतलब है कि आप अपनी इच्छानुसार HTML तत्वों को ठीक कर सकते हैं, स्थानांतरित कर सकते हैं या स्क्रॉल कर सकते हैं, जो भी अवधि आप चाहते हैं और आसानी से अपनी वेबसाइट पर लंबन प्रभाव जोड़ सकते हैं। यह उच्च अनुकूलन योग्य है और हल्के (6kb जब gzipped) है। अन्य लंबन स्क्रॉल प्लग इन में, स्क्रॉल मैजिक में सबसे अच्छा प्रलेखन और बाहरी संसाधन हैं। यह मोबाइल के साथ भी पूरी तरह से संगत है।

स्क्रॉलमाजिक में बहुत सारे उदाहरण सूचीबद्ध हैं। इस पुस्तकालय का उपयोग करने के लिए प्रेरणा और मार्गदर्शन के लिए उन्हें देखें।

के बारे में:

होमपेज: //janpaepke.github.io/ScrollMagic/

इनके द्वारा निर्मित: Jan Paepke

स्थापना:

1. सीडीएन:

2. जीथब से डाउनलोड करें

2. झालर

skrollr एक हल्का शुद्ध जावास्क्रिप्ट और CSS लाइब्रेरी है, जिसमें कोई jQuery शामिल नहीं है। यह मूल रूप से 'स्क्रॉल जादू सीएसएस के लिए सरलीकृत' है। Skrollr का उपयोग करने के लिए, आपको जावास्क्रिप्ट या किसी jQuery की आवश्यकता नहीं है। बस HTML और CSS ही काफी है। skrollr आपके इच्छित किसी भी HTML तत्व को चेतन करने के लिए डेटा विशेषताओं का उपयोग करता है। स्कॉलर के मुख्य नुकसानों में से एक यह है कि एनिमेशन केवल काम करते हैं जबकि पेज स्क्रॉल किया जा रहा है। अन्यथा सभी प्रभावों को ताक पर रख दिया जाता है। skrollr आपको अपने HTML तत्वों के सभी CSS गुणों को एनिमेट करने देता है।

के बारे में:

होमपेज: //prinzhorn.github.io/skrollr/

इनके द्वारा निर्मित: प्रिंज़ोर्न

स्थापना: Github से डाउनलोड करें

3. pagePiling.js

पेज पाइलिंग एक jQuery प्लगइन है जो आपको अपनी वेबसाइट को अलग-अलग वर्गों में बनाने की अनुमति देता है जो एक दूसरे के ऊपर ढेर होते हैं। स्क्रॉल करने पर, या URL तक पहुंचने से, प्रत्येक अनुभाग एक साफ रपट वाले एनीमेशन में प्रकट हो जाता है। pagePiling.js सभी प्लेटफार्मों - डेस्कटॉप, टैबलेट और मोबाइल के साथ संगत है - और अधिकांश ब्राउज़रों के साथ काम करता है। यह पुराने ब्राउज़रों पर इनायत करता है जो इसके एनिमेशन का समर्थन नहीं करते हैं (जैसे IE 7)। प्लगइन का उपयोग करने के लिए, आपको अपने HTML के अंदर एक सीएसएस और एक जावास्क्रिप्ट फाइल शामिल करने की आवश्यकता है। पेजपाइलिंग। js (डॉक्यूमेंट) द्वारा पहले से ही फंक्स्ड है:

$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});

अधिक उन्नत इनिशियलाइज़ेशन के लिए, README.md पर जाएँ।

के बारे में:

होमपेज: //alvarotrigo.com/pagePiling/

इनके द्वारा निर्मित: alvarotrigo

स्थापना: Github से डाउनलोड करें

4. एल्टन

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

एल्टन तीन अलग प्रकार की कार्यक्षमता की अनुमति देता है, जिसे 'हीरो', 'बुकेंड' और 'स्टैंडर्ड' कहा जाता है। मानक आपको 100% ऊंचाई वाले प्रत्येक खंड के साथ पूर्ण पृष्ठ स्क्रॉलिंग का उपयोग करने की अनुमति देता है। एक स्क्रॉल अगले सेक्शन या पिछले सेक्शन को सामने लाता है। बुकेंड आपको एक बुकएन्ड-प्रकार का अनुभव बनाने देता है जबकि हीरो आपको केवल the हीरो ’सेक्शन को स्क्रॉल करने की अनुमति देता है, शेष पेज के साथ (स्क्रॉल) देशी स्क्रॉलिंग होती है।

के बारे में:

होमपेज: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/

इनके द्वारा बनाया गया: कागज-पत्ती

स्थापना: Github से डाउनलोड करें

5. तारकीय। जेएस

स्टेलर एक jQuery प्लगइन है जिसके माध्यम से आप आसानी से लंबन स्क्रॉलिंग प्रभाव जोड़ सकते हैं। चलाने के लिए, पहले आपको $ .stellar () फ़ंक्शन चलाना होगा। व्यक्तिगत तत्वों के लिए एनिमेशन सेटिंग्स को उस तत्व पर डेटा विशेषताओं का उपयोग करके कॉन्फ़िगर किया जा सकता है।

तारकीय यहां तक ​​कि आपके पास लंबन पृष्ठभूमि है, जो कि पृष्ठभूमि हैं जो स्क्रॉल पर पुनरावृत्ति करती हैं। Stellar.js की सबसे उपयोगी विशेषताओं में से एक ऑफ़सेट है।

सभी तत्व अपनी मूल स्थिति में लौट आएंगे जब उनके ऑफसेट अभिभावक स्क्रीन के किनारे से मिलते हैं - प्लस या आपके स्वयं के वैकल्पिक ऑफसेट को घटाते हैं। यह आपको बहुत आसानी से जटिल लंबन पैटर्न बनाने की अनुमति देता है। (तारकीय प्रलेखन)

के बारे में:

मुखपृष्ठ: //markdalgleish.com/projects/stellar.js/

इनके द्वारा निर्मित: मार्क डेलजिश

स्थापना: Github से डाउनलोड करें

6. मल्टीस्कूल.जेएस

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

के बारे में:

होमपेज: //alvarotrigo.com/multiScroll/

इनके द्वारा निर्मित: alvarotrigo

स्थापना: Github से डाउनलोड करें

7. स्क्रॉल करें

स्क्रॉलमा अपने पृष्ठ पर सरल लंबन स्क्रॉल प्रभाव जोड़ने के लिए एक प्लगइन है। जैसे ही आप नीचे स्क्रॉल करते हैं, यह पृष्ठ पर मौजूद तत्वों की अस्पष्टता को माप सकता है, घुमा सकता है, बदल सकता है और बदल सकता है। स्क्रॉलमे को जावास्क्रिप्ट की आवश्यकता नहीं है, और केवल सीएसएस ज्ञान ही पर्याप्त है। वर्ग "चेतन" और एक आवश्यक डेटा विशेषताओं को जोड़कर, आप किसी भी HTML तत्व को चेतन कर सकते हैं। स्क्रॉलमा का उपयोग सीएसएस प्रभावों को जोड़ने के लिए किया जाता है। यह हल्का है और सभी एनिमेशन चिकने हैं, जब तक आप इन्हें मॉडरेशन में इस्तेमाल करते हैं।

के बारे में:

मुखपृष्ठ: //scrollme.nckprsn.com/

इनके द्वारा निर्मित: निक पियरसन

स्थापना: Github से डाउनलोड करें

8. लंबन स्क्रॉल

लंबन स्क्रॉल jQuery प्लगइन का उपयोग करने के लिए एक आसान है जो आपको Spotify जैसी साइटों पर पाए जाने वाले लंबन छवि स्क्रॉल प्रभाव बनाने देता है। यह उपयोग करने के लिए काफी सरल है - बस छवि धारकों के लिए आवश्यक सीएसएस कक्षाएं निर्दिष्ट करें। उपयोग करने के बजाय टैग, इस प्लगइन का उपयोग करने के लिए आपको उन तत्वों का उपयोग करना होगा जिनकी पृष्ठभूमि छवि निर्दिष्ट है (`पृष्ठभूमि-छवि` सीएसएस संपत्ति का उपयोग करके) आप सीएसएस @ मीडिया के प्रश्नों का उपयोग करके तत्वों को उत्तरदायी बना सकते हैं।

के बारे में:

मुखपृष्ठ: //parallax-scroll.aenism.com/

इनके द्वारा निर्मित: Aen

स्थापना: Github से डाउनलोड करें

9. जरलक्स

Jarallax एक CSS और Javascript लाइब्रेरी है जो लंबन स्क्रॉलिंग इफेक्ट्स में माहिर है। जारलैक्स जावास्क्रिप्ट (कोई jQuery, सिर्फ शुद्ध वेनिला जेएस) का उपयोग करके कॉन्फ़िगर किया गया है। यह चिकनी स्क्रॉलिंग सुविधाओं, सहजता और लंबन एनीमेशन का समर्थन करता है। Jarallax प्लेटफार्मों भर में सबसे अधिक ब्राउज़रों द्वारा समर्थित है। जारलैक्स वेब साइट पर आपकी आवश्यकताओं के लिए जारलैक्स को अनुकूलित करने के लिए उत्कृष्ट दस्तावेज हैं। जारलैक्स में वीडियो ट्यूटोरियल भी हैं जो दिखाते हैं कि आपकी वेबसाइट के लिए जारलैक्स को कैसे सेटअप किया जाए और कैसे शुरू किया जाए।

के बारे में:

होमपेज: //www.jarallax.com/

इनके द्वारा निर्मित: जारलैक्स

स्थापना: जारलैक्स वेबसाइट से डाउनलोड करें

10. सुपरसॉकरोरमा

Superscrollorama एक jQuery आधारित प्लगइन है जो स्क्रॉल एनिमेशन का समर्थन करता है। यह TweenMax और Greensock Tweening Engine द्वारा संचालित है, जो एनीमेशन प्रदर्शन और चिकनाई को बढ़ाता है। Superscrollorama एनिमेशन को jQuery के माध्यम से कहा जाता है, और आप अधिकांश TweenMax.js फ़ंक्शन का उपयोग कर सकते हैं। दुर्भाग्य से, ये एनिमेशन मोबाइल उपकरणों द्वारा पूरी तरह से समर्थित नहीं हैं (क्योंकि टच स्क्रीन डिवाइस स्क्रॉल को अलग तरीके से संभालते हैं)। हालाँकि, setScrollContainerOffset विधि का उपयोग करते हुए, Superscrollorama प्रभाव मोबाइल उपकरणों पर पहुँचा जा सकता है।

यहाँ यह करने के लिए कोड है:

.setScrollContainerOffset(x, y)

(x: स्क्रॉलकंटेनर का x ऑफ़सेट, y: x ऑफसेट ऑफ़ द स्क्रॉलकेंटर)

के बारे में:

मुखपृष्ठ: //johnpolacek.github.io/superscrollorama/

इनके द्वारा निर्मित: johnpolacek

स्थापना: Github से डाउनलोड करें

देखें भी: 10 सर्वश्रेष्ठ स्थैतिक साइट जनरेटर