मुखपृष्ठ » यूआई / UX » JQuery के प्लगइन viewScroller.js के साथ स्क्रॉल पूर्ण पृष्ठ स्क्रॉल

    JQuery के प्लगइन viewScroller.js के साथ स्क्रॉल पूर्ण पृष्ठ स्क्रॉल

    जावास्क्रिप्ट स्क्रॉल प्रभाव दर्जनों महान पुस्तकालयों के साथ लेने के लिए वर्षों के लिए चारों ओर गया है। लेकिन मैदान में एक नया दावेदार है viewScroller.js.

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

    स्वाभाविक रूप से, यह पूरी तरह से मुक्त पुस्तकालय है GitHub पर उपलब्ध है और स्थापित करने के लिए आसान है Bower या npm के साथ.

    हालाँकि, viewScroller.js है नहीं एक स्वतंत्र जावास्क्रिप्ट पुस्तकालय. यह jQuery और दो विशिष्ट प्लगइन्स पर निर्भर करता है: jQuery मूसवेल तथा jQuery के आसान. य़े हैं दोनों की आवश्यकता है स्क्रॉल प्रभाव ठीक से काम करने के लिए.

    यह देखने के मूल्य में बाधा डाल सकता है क्योंकि इसमें केवल काम करने के लिए कुछ JS पुस्तकालयों की आवश्यकता होती है। लेकिन अगर आप पहले से ही jQuery का उपयोग कर रहे हैं, तो यह एक no-brainer है। viewScroller.js एक प्राप्त करने के लिए सबसे सरल विधि प्रदान करता है सिंगल पेज स्क्रॉलिंग वेब ऐप बहुत कोड के बिना चल रहा है.

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

    शुरू करने का सबसे सरल तरीका है ViewScroller डेमो क्लोनिंग. उनके पास दाएं साइडबार के साथ एक है, बाएं साइडबार के साथ एक और बीच में दो साइडबार सैंडविचिंग सामग्री है.

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

    पर एक नज़र रखना लाइव डेमो और देखो कि तुम क्या सोचते हो यदि आप UX और स्क्रॉल व्यवहार पसंद करते हैं तो अनुसरण करें GitHub पर सेटअप गाइड आरंभ करना.