Rellax.js - वेनिला जावास्क्रिप्ट का उपयोग करके नि शुल्क लंबन सुविधाएँ
लंबन स्क्रॉलिंग अविश्वसनीय लगता है जब सही किया जाता है। यह ऐसी सुविधा नहीं है जो आप प्रत्येक वेबसाइट पर चाहते हैं, लेकिन रचनात्मक साइटों और लैंडिंग पृष्ठों, लंबन तत्वों के लिए तेजी से ध्यान खींचो.
के लिए मुफ्त जावास्क्रिप्ट पुस्तकालयों के टन हैं एनिमेटेड स्क्रॉलिंग प्रभाव लेकिन कई लोग कुछ लोगों के लिए फूला हुआ या बहुत जटिल हैं.
इसलिए मैं सलाह देता हूं Rellax.js अपने लंबन जरूरतों के लिए। यह वेनिला जावास्क्रिप्ट पर बनाया गया एक मुक्त खुला स्रोत प्लगइन है, इसलिए यह कोई निर्भरता नहीं है.
डिफ़ॉल्ट रूप से, यह केवल एक साधारण फ़ंक्शन कॉल की आवश्यकता है पृष्ठ तत्वों को लंबन वर्ग आवंटित करने के लिए। फिर, जैसे ही आप स्क्रॉल करते हैं, ये तत्व स्थिर रहें और उपयोगकर्ता के दृष्टिकोण के साथ आगे बढ़ें.
आप इन तत्वों को करीब, दूर, या पृष्ठ तत्वों के पीछे दिखाई देने के लिए अनुकूलित कर सकते हैं। यह बनाता है गहराई का भ्रम पृष्ठ पर और यह सभी एक साधारण जावास्क्रिप्ट पुस्तकालय के माध्यम से काम करता है.
यदि आप एक प्रतिलिपि डाउनलोड करना चाहते हैं, तो सभी Rellax स्रोत कोड GitHub पर मुफ्त में उपलब्ध है.
पूरा सेटअप एकल JS फ़ंक्शन का उपयोग करता है लक्ष्यीकरण .rellax कक्षा ऐसा है:
var rellax = नया Rellax ('। rellax'); ध्यान दें कि आप बहुत अधिक उपयोग कर सकते हैं किसी भी वर्ग आप चाहते हैं, लेकिन उदाहरण डेमो उपयोग करता है .rellax सादगी के लिए.
यहाँ से, आप बस अपने लंबन तत्वों को लपेटें अंदर एक div के साथ .rellax वर्ग और गति विशेषता सेट करें. इस के माध्यम से काम करता है डेटा-rellax गति कस्टम विशेषता जो -10 से +10 तक मूल्यों को स्वीकार करती है.
यहाँ ए उदाहरण स्निपेट डेमो पेज पर HTML से:
मैं अतिरिक्त धीमा और चिकना हूं
आप भी कर सकते हैं केंद्र तत्व पेज पर और तत्व पदों को अनुकूलित करें CSS के माध्यम से.
Rellax आपको यह नहीं बताता कि पृष्ठ को कैसे संरचित करें या अपने पृष्ठ पर CSS तत्वों को कैसे परिभाषित करें। यह सब है एक प्राकृतिक लंबन स्क्रॉल प्रभाव बनाएँ शुद्ध जावास्क्रिप्ट के साथ। आप इसका उपयोग कैसे करते हैं यह पूरी तरह आप पर निर्भर है.
देखने के लिए ए लाइव डेमो, मुख्य साइट पर एक नज़र डालें या GitHub रेपो के माध्यम से ब्राउज़ करें। इसमें कुछ दस्तावेज शामिल हैं, साथ ही Rellax.js का उपयोग करके लाइव वेबसाइटों के लिंक भी शामिल हैं.
और सबसे अच्छी बात यह है कि टीम लगातार अनुरोधों को लेने के लिए तैयार है, इसलिए यदि आप किसी भी मुद्दे को देखते हैं या सुविधाओं के लिए सुझाव देते हैं तो टीम को एक त्वरित संदेश भेजें.
