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

सबसे पहले, मुझे अक्सर संदेह होता है कि क्या मैं इसे पूरा कर सकता हूं, लेकिन कुछ गहन विचार के बाद, मुझे आमतौर पर डिज़ाइन को टुकड़ों में तोड़ने का एक तरीका मिल जाता है। उन टुकड़ों को जोड़कर, मैं प्रभाव प्राप्त करने का प्रबंधन करता हूं। बहुत हो गई बात - आइए देखें कि आप इसे स्वयं कैसे बना सकते हैं!

केपीआर पद्य पाद लेख प्रभाव को तोड़ना

साइट के अंत में, आपको पृष्ठभूमि में केपीआर बैनर मिलेगा। पहली नज़र में, यह थोड़ा जटिल लग सकता है, लेकिन यह उतना जटिल नहीं है।

सबसे पहले, क्लास .container के साथ एक div बनाएं। यह हमारे ट्यूटोरियल का मूल तत्व होगा।

इसके बाद, .कंटेनर को दो भागों में विभाजित करें: .सबकंटेनर-रैपर और फ़ूटर। पादलेख तत्व केपीआर बैनर को धारण करेगा।

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

इस बिंदु तक, सभी तत्व सामान्य HTML प्रवाह में हैं, यानी, ऊपर से नीचे। अब, हमें फ़ुटर को पीछे रखकर और .सबकंटेनर-रैपर को सामने लाकर इस क्रम को तोड़ने की ज़रूरत है। ऐसा करने के लिए, हम .subcontainer-रैपर को उसके मूल .container के सापेक्ष स्थिति: पूर्ण पर सेट करेंगे। यह .सबकंटेनर-रैपर को सामान्य DOM प्रवाह से हटा देगा।

इफ़ेक्ट सेट करने के लिए हमें बस इतना ही चाहिए। अब, .सबकंटेनर-रैपर के ऊपरी हिस्से को सामग्री से भरें, लेकिन निचले हिस्से-अदृश्य डिव-को खाली छोड़ दें। इसके अलावा, पादलेख में सामग्री जोड़ें।

एक बार जब आप सामग्री जोड़ लेते हैं, तो इसे कुछ इस तरह दिखना चाहिए।

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

_साथ फ़ॉलो करने के लिए धन्यवाद! मुझे आशा है कि आपको यह मार्गदर्शिका उपयोगी और समझने में आसान लगी होगी। जिज्ञासु बने रहें और अन्वेषण करते रहें!

मूल: केपीआर-पद्य

डेमो साइट: डेमो लिंक, इस प्रदर्शन के लिए, मैंने Google I/O साइट (https://io.google/2024/) का उपयोग किया और एक समान अवधारणा को प्रदर्शित करने के लिए इसे अनुकूलित किया।

स्रोत कोड: जीथब लिंक_