पेश है लंबन स्क्रॉलिंग

जो कोई भी दोस्तों को खेलता या देखता है, या सिद्धांत रूप में, 80-90 के दशक में जारी किए गए गेम देखता है, उसे लंबन स्क्रॉल तकनीक से परिचित होना चाहिए।

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

मैंने वेब विकास पर एक लेख में रेट्रो गेम के बारे में बात क्यों शुरू की? सबसे सरल उत्तर होगा "क्योंकि वे शांत हैं," लेकिन नहीं। लंबन स्क्रॉलिंग एक शांत डिजाइन अवधारणा है जो वेब डिज़ाइन की दुनिया में अपना मार्ग प्रशस्त करती है। नाइके इस तकनीक का उपयोग करने में सबसे पहले एक बड़ी सफलता के साथ था, जब उन्होंने अपने मूल नाइके बेटर साइट को विकसित करने के लिए मार्केटिंग दिग्गज वीडेन और कैनेडी को काम पर रखा था। नाइके बेटर वर्ल्ड वेबसाइट को तब से अपडेट किया गया है और एक नए के साथ बदल दिया गया है, लेकिन एक और साइट है जो कि नाइके के पहले लंबन डिजाइन के समान दिखती है - एक्टिवेट स्पोर्ट्स ड्रिंक वेबसाइट।



आपने शायद देखा है कि किसी साइट के पृष्ठ को नीचे स्क्रॉल करते समय, इस पृष्ठ पर स्थित कई अलग-अलग तत्व अलग-अलग गति से चलते हैं। उदाहरण के लिए ऊपर दी गई छवि में प्रदर्शित पृष्ठ को लेते हैं। जैसे ही आप पृष्ठ को नीचे स्क्रॉल करते हैं, आप देखेंगे कि बैकग्राउंड में नीले डॉट्स (जो थोड़े धुंधले हैं) स्क्रॉलबार के समान गति से चलते हैं। आप यह भी देखेंगे कि नीले डॉट्स का एक समूह, जो अधिक केंद्रित है और अग्रभूमि में, स्क्रॉलबार की तुलना में थोड़ी अधिक गति से आगे बढ़ता है। पाठ "0 SUGAR | 0 कैलोरी | स्वाभाविक रूप से संरक्षित "और" उत्पाद "पृष्ठ का मुख्य शीर्षक। और अंत में, उत्पाद की छवियां ही होती हैं, पृष्ठभूमि में छोटे और बाहर दोनों ध्यान केंद्रित करते हैं, और बड़े, केंद्रित और अग्रभूमि में। उत्पाद की पृष्ठभूमि की छवियां पाठ के समान गति से चलती हैं, जबकि अग्रभूमि में उत्पाद की छवियां पाठ की तुलना में तेज चलती हैं। यह लंबन स्क्रॉलिंग का एक आदर्श प्रदर्शन है, जब छवियों की विभिन्न परतें ओवरलैप होती हैं और सभी पृष्ठ पर स्क्रॉल करते समय तीन-आयामी प्रभाव पैदा करते हुए अलग-अलग गति से चलते हैं।

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



पहली चीज़ जो आप देखेंगे वह पृष्ठ स्क्रॉल करने की दिशा है - यह ऊर्ध्वाधर नहीं है, लेकिन जैसा कि ऊपर बताया गया है, लेकिन शुरू में क्षैतिज है। बेशक, यह अच्छा है, लेकिन यह भी एक नई अवधारणा नहीं है। इसके अलावा, आप पृष्ठभूमि में Yoshi डायनासोर और गोले के साथ लंबन प्रभाव, अग्रभूमि में मारियो और लुइगी और मुख्य सामग्री को देखेंगे, जो स्क्रॉल करते समय विभिन्न गति से चलते हैं। लेकिन जैसे ही आप #highlights और #attack पृष्ठों पर पहुंचते हैं, ऑफ़सेट पथ अब पूरी तरह से क्षैतिज नहीं होगा। वही #rediscover और #snes पृष्ठों के बीच संक्रमण के लिए जाता है। छवियां न केवल विस्थापन की अपनी अलग गति को बरकरार रखती हैं, बल्कि क्षैतिज से ऊर्ध्वाधर तक सामान्य दिशा को भी बदलती हैं।

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



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



मेरी पहली धारणा थी "ओह, यह साइट सुंदर लग रही है।" लेकिन जब मैंने इसे स्क्रॉल करना शुरू किया, तो छाप तुरंत "वाह, यह साइट शांत है!"। एक साधारण लंबन प्रभाव जोड़ना सिर्फ अच्छे और यादगार के बीच का अंतर बनाता है।

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

लंबन साइटों के उदाहरण

उनमें से कुछ बहुत शांत हैं, मेरा सुझाव है कि आप पढ़ें:

• artofflightmovie.com
• laurentiuswonen.com/jaarverslag2010
• smartusa.com
• beetle.com
• liptonicetea.pl
• manufacturedessai.it
• iutopi.com
• marklawrencedesign.com
• rapidboot.com
• reverenddanger.com
• netlash-bseen.be
• discover.store.sony.com

लंबन प्रभाव बनाने के लिए उपकरण:

• jQuery लंबन छवि स्लाइडर
• स्टीव Fenton द्वारा jQuery छवि लंबन
• लंबन लंबन: जॉन रासच द्वारा एक jQuery प्लगइन
• जॉन पोलेसेक द्वारा स्क्रॉलोरमा
• जॉन पोलेसेक द्वारा स्क्रोलडेक
• jParallax
• Mark Dalgleish द्वारा Stellar.js
• जोएल बेसादा द्वारा jQuery स्क्रॉल पथ
• विक्टर कूलोन द्वारा कर्टन.जेएस
• कैमरन मैकफी द्वारा प्लेक्स

लंबन प्रभाव (अंग्रेजी) के साथ साइट बनाने पर ट्यूटोरियल:

• SmashingMagazine.com के लिए jQuery, HTML और CSS के साथ एक लंबन स्क्रॉल प्रभाव कैसे बनाएं
• एक पृष्ठ वेबसाइट, लंबवत लंबन
• JQuery और CSS के साथ लंबन स्क्रॉलिंग वेबसाइट इंटरफ़ेस बनाएँ
• jQuery के लंबन ट्यूटोरियल - एनिमेटेड हेडर पृष्ठभूमि
• एक लंबन स्क्रॉल कहानी निर्माण फ्रेमवर्क का निर्माण
• लंबन स्लाइडर jQuery के साथ