JQuery और CSS का उपयोग करके एक लंबन स्क्रॉलिंग प्रभाव बनाएँ

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

लंबन क्या है?

यहां तक ​​कि अगर आप "लंबन स्क्रॉलिंग" शब्द से परिचित नहीं हैं, तो आप शायद तकनीक से परिचित हैं। लंबन स्क्रॉलिंग एक 2 डी एनिमेशन प्रक्रिया है जो गहराई का भ्रम पैदा करती है। सामने की परतों को एनिमेट करना बैकग्राउंड एनिमेशन की तुलना में तेज़ है। जब आप एक चलती कार का निरीक्षण करते हैं, तो यह आपको लगता है कि कार के सामने स्थित वस्तुएं कार के पीछे स्थित वस्तुओं की तुलना में तेजी से चलती हैं। लंबन स्क्रॉल दर्शकों को यह सोचने के लिए एक ही सिद्धांत का उपयोग करता है कि वह एक 3 डी दृश्य देख रहा है।

डेमो और डाउनलोड

मेरा डेमो पृष्ठ एक लंबवत लंबन स्क्रॉलिंग प्रभाव बनाने का एक तरीका दिखाता है।

डेमो देखें
स्रोत डाउनलोड करें

आप सामान्य तरीके से स्क्रॉल कर सकते हैं, पृष्ठ के दाईं ओर नेविगेशन मेनू या प्रत्येक लेख के नीचे दिखाई देने वाले अगले / पिछले बटन का उपयोग कर सकते हैं।
पृष्ठ में गहराई का भ्रम बनाने के लिए चार स्वतंत्र रूप से एनिमेटेड परतें हैं।

सफारी में, स्क्रॉलिंग सुचारू रूप से चलती है (कम से कम मेरे कंप्यूटर पर), लेकिन डेमो को किसी भी आधुनिक ब्राउज़र में काम करना चाहिए।

अस्वीकरण 1: चूंकि यह सिर्फ एक प्रयोग है, इसलिए मैंने मोबाइल उपकरणों पर काम करने के लिए डेमो का अनुकूलन नहीं किया।

अस्वीकरण 2: डेमो में प्रयुक्त नेविगेशन मेनू नाइके बेटर वर्ल्ड वेबसाइट पर देखा गया है। यदि आप अपनी साइट पर एक समान नेविगेशन का उपयोग करने की योजना बनाते हैं, तो इसकी उत्पत्ति को ध्यान में रखें।

यह कैसे काम करता है

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

/*   ( / ) */ #parallax-bg3 { z-index: 3; position: fixed; left: 50%; /*       */ top: 0; width: 940px; margin-left: -470px; /*      */ } 

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

 #bg3-1 { position: absolute; top: -111px; left: 355px; } #bg3-2 { position: absolute; top: 812px; left: 321px; } /*   … */ 

एक लंबन स्क्रॉलिंग प्रभाव बनाने के लिए jQuery का उपयोग करते हुए कोड की कुछ पंक्तियों की आवश्यकता होती है। मुझे आश्चर्य हुआ कि यह कितना सरल है।

 $(window).bind('scroll',function(e){ parallaxScroll(); }); function parallaxScroll(){ var scrolled = $(window).scrollTop(); $('#parallax-bg1').css('top',(0-(scrolled*.25))+'px'); $('#parallax-bg2').css('top',(0-(scrolled*.5))+'px'); $('#parallax-bg3').css('top',(0-(scrolled*.75))+'px'); } 

अग्रभूमि की परत को हमेशा दस्तावेज़ के शीर्ष पर संरेखित किया जाता है, जबकि अन्य परतों के आंदोलन को उनकी गहराई के आधार पर समायोजित किया जाता है।
निचली परत, यह धीमी गति से चलती है।

नेविगेशन को नियंत्रित करने के लिए jQuery के बाकी कोड का उपयोग किया जाता है। जब उपयोगकर्ता नेविगेशन बटन दबाता है, तो पेज संबंधित लेख पर स्क्रॉल करता है। यदि उपयोगकर्ता के पास जावास्क्रिप्ट अक्षम है, तो लिंक पर उपयोग किए जाने वाले "एंकर" खेलने में आते हैं। वे आपको अभी भी पृष्ठ के चारों ओर जाने की अनुमति देते हैं, लेकिन एनीमेशन के बिना।

अगले चरण

मुझे यकीन है कि लंबन स्क्रॉलिंग प्रभाव बनाने के कई अन्य तरीके हैं, और मुझे उम्मीद है कि मेरा अनुभव इस विधि की खोज के लिए एक शुरुआती बिंदु के रूप में काम करेगा।