Roll.js के साथ अपना खुद का पेज स्क्रॉलिंग प्रभाव बनाएँ
आप पूरे वेब पर दर्जनों स्क्रॉलिंग लाइब्रेरी पा सकते हैं। अधिकांश जावास्क्रिप्ट में लिखे गए हैं और उनके अपने प्रभाव हैं जो आप सिंगल पेज लेआउट, ऑन-स्क्रॉल एनिमेशन के लिए आराम कर सकते हैं, और बहुत कुछ.
लेकिन क्या बारे में अपने स्वयं के स्क्रॉल प्रभाव को कोडित करना? या क्या होगा अगर आप केवल एक आसान तरीका ट्रैक करना चाहते हैं कि उपयोगकर्ता ने किस पृष्ठ को कितना नीचे स्क्रॉल किया है?
Roll.js वह लाइब्रेरी है जिसकी आप तलाश कर रहे हैं। इस ओपन सोर्स स्क्रिप्ट पागल छोटे और सुपर प्रयोग करने में आसान है. आप इसे जावास्क्रिप्ट की कुछ पंक्तियों के साथ काम कर सकते हैं। और सब से अच्छा यह आपको कुछ भी विशिष्ट प्रदर्शन करने के लिए मजबूर नहीं करता है, बल्कि आपको उपकरण देता है अपने स्वयं के कस्टम स्क्रॉलिंग फीचर बनाने के लिए.
इस पुस्तकालय का लक्ष्य डेवलपर्स को बहुत प्रयास किए बिना अपने स्क्रॉलिंग प्रभाव को संरचना करने में मदद करना है.
यदि आप मुख्य GitHub रेपो पर एक नज़र डालते हैं तो आपको कुछ उदाहरण स्निपेट के साथ एक संपूर्ण सेटअप गाइड मिलेगा। आप ऐसा कर सकते हैं उपयोगकर्ता को स्क्रॉल करने के लिए कॉल करने के लिए फ़ंक्शन चलाएं, या अलग करने के लिए “शीशे” पेज पर.
ये सिंगल-पेज लेआउट पर सबसे अच्छा काम करते हैं लेकिन आप रोल.ज का इतना उपयोग कर सकते हैं.
एकल फ़ंक्शन कॉल के साथ आप प्रत्येक स्क्रॉल के साथ डेटा खींच सकते हैं जिसमें शामिल हैं:
- कुल पृष्ठ चरण (यदि लागू हो).
- कुल% पृष्ठ नीचे स्क्रॉल किए गए.
- पिक्सेल में पृष्ठ पर वर्तमान स्थिति.
- डिवाइस के आकार के आधार पर कुल व्यूपोर्ट ऊंचाई.
यह जंप लिंक के साथ भी काम करता है जो उपयोगकर्ताओं को पृष्ठ के कुछ हिस्सों में नीचे (या ऊपर) लाता है.
लेकिन आप इन सुविधाओं के अन्य पुस्तकालयों में भी बहुत कुछ पा सकते हैं। क्या रोल.जेएस को इतना खास बनाता है?
इसका एक भाग वाक्यविन्यास है, लेकिन यहाँ बड़ा विक्रेता कुल पुस्तकालय आकार है 8KB जब छोटा किया गया। इस तरह के एक विस्तृत स्क्रॉल लाइब्रेरी के लिए यह बहुत छोटा है!
आप देख सकते हैं कि यह मुख्य डेमो पेज पर कैसे काम करता है और आप भी कर सकते हैं अपने आप को उन डेमो में खोदने के लिए Roll.js स्रोत कोड डाउनलोड करें.
लाइव डेमो और कच्ची लाइब्रेरी फ़ाइलों से सब कुछ GitHub से खींचा जा सकता है और वे काम करने के लिए सुपर आसान हैं.
लेकिन अगर आपके पास कोई सवाल, सुझाव है, या भयानक पुस्तकालय के लिए अपना धन्यवाद साझा करना चाहते हैं, तो आप निर्माता @williamngan को संदेश भेज सकते हैं.