साइट पर स्लाइड का प्रभाव। संस्करण दो, पूरक और संशोधित

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

किसी एक साइट पर काम करते समय, हमें स्लाइड के प्रभाव का एहसास करने की आवश्यकता का सामना करना पड़ा।
अर्थात्, पृष्ठ के ऊर्ध्वाधर स्क्रॉलिंग के साथ, इसे एक पूरे के रूप में नहीं जाना चाहिए, लेकिन व्यक्तिगत शीट के एक स्टैकेबल स्टैक के रूप में।

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

हम परंपरागत रूप से फ़ायरफ़ॉक्स + फायरबग में विकास का संचालन करते हैं।

ब्राउज़र विंडो के अंदर किसी दस्तावेज़ को स्क्रॉल करते समय साइट ब्लॉक के निर्देशांक को बदलने के लिए आवश्यक रूप से उबला हुआ कार्य।

JQuery का उपयोग करते हुए, हम बस दस्तावेज़ के onscroll घटना से बंधते हैं और खिड़की के अंदर दस्तावेज़ की स्थिति के आधार पर ब्लॉकों की स्थिति में बदलाव को पंजीकृत करते हैं।

रेक नंबर 1 : यदि स्क्रॉलिंग प्रक्रिया के दौरान हम DOM को हेरफेर करते हैं जो पूरे दस्तावेज़ की ऊंचाई को प्रभावित करता है, तो हमें सामग्री के पुनर्निर्माण और पुनर्विकास के कारण ब्रेक मिलेगा, और स्क्रॉल क्षेत्र के आकार बदलने और स्क्रॉलबार के सुदृढीकरण के कारण स्क्रॉलिंग के दौरान सबसे अप्रिय बात कूदती है। ।

इससे बचने के लिए, हमने दस्तावेज़ पदानुक्रम के पहले स्तर पर स्थित तत्वों को स्थानांतरित नहीं करने का निर्णय लिया।
प्रत्येक स्लाइड अंततः पृष्ठ पर आकार और स्थिति में एक निरंतर div (.slide_wrapper) बन जाती है, जिसके अंदर एक ब्लॉक रैपर (.slide) होता है, जिसमें स्लाइड की सामग्री होती है।

इस तंत्र को लागू करने के लिए, हमने एक कक्षा (इसके जावास्क्रिप्ट अर्थ में) को बनाया है।
ऑब्जेक्ट बनाते समय, पैरामीटर कंस्ट्रक्टर को पास किए जाते हैं जो आंदोलन (.slide_wrapper) में शामिल तत्वों के सेट को परिभाषित करते हैं और कॉलबैक फ़ंक्शन के लिंक के साथ एक सरणी।
जब बनाया जाता है, तो aldparallax ऑब्जेक्ट स्क्रॉल और विंडो ऑब्जेक्ट की घटनाओं का आकार बदलने से जुड़ा होता है।
जब कोई घटना होती है, तो प्रत्येक स्लाइड के लिए डेटा का एक सरणी तैयार किया जाता है (दस्तावेज़ के वर्तमान दृश्यमान क्षेत्र के निर्देशांक, दस्तावेज़ में स्लाइड की स्थिति, स्लाइड के दृश्य क्षेत्र के निर्देशांक) और एक कॉलबैक कहा जाता है, जिसमें स्लाइड में तत्वों को स्थानांतरित करने के लिए एल्गोरिदम रखा गया है।
फ़ंक्शन के अंदर, हम कंटेनर के अंदर स्लाइड की स्थिति को स्क्रॉलिंग की ओर स्थानांतरित करते हैं (शीर्ष संपत्ति को स्थिति के साथ बदलकर: रिश्तेदार), जो वांछित प्रभाव देता है।

उदाहरण 1: jsfiddle.net/88WvX

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

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

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

निश्चित स्थिति के आवश्यक .slide तत्वों (स्थिति: फिक्स्ड;) को सेट करके स्थिति को ठीक किया गया था। स्क्रॉल करते समय ऐसे तत्व अपनी स्क्रीन स्थिति को नहीं बदलते हैं।
यह केवल गणना करने के लिए बनी हुई है। विंडर खिड़की के सापेक्ष ऑफसेट करता है, और मूल तत्व और जर्म्स गायब नहीं होते हैं। हमारे onParallaxEvent फ़ंक्शन को समायोजित करें।

उदाहरण 2.jsfiddle.net/PWm7v

रेक नंबर 3 : कुछ मोबाइल ब्राउज़रों में ऑनस्क्राॅल घटना तब तक उत्पन्न नहीं होती है जब तक स्क्रॉलिंग पूरी तरह से बंद नहीं हो जाती है, जिससे "एनीमेशन" में राक्षसी देरी होती है।
समाधान टाइमर द्वारा समन्वय तालमेल को कॉल करने के लिए हो सकता है, या अनुरोध के माध्यम से भी बेहतर हो सकता है। मैं इस सुधार को स्वतंत्र कार्य के लिए पाठकों के लिए छोड़ता हूं।

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

निम्नलिखित उदाहरण हमारे काम की परियोजनाओं में से एक सरल उदाहरण है।
हेबरा प्रभाव को रोकने के लिए, कोड को थोड़ा सरल और jsfiddle पर रखा गया था:

उदाहरण 3: jsfiddle.net/2Lhvb