Create an interactive parallax image

Feb 4, 2026

कैसे करना है

लंबलक्स स्क्रॉलिंग अब गारंटीकृत ध्यान-ग्रैबर नहीं है, लेकिन आपके आगंतुकों को शामिल करने और आपके बढ़ाने के लिए लंबन तकनीकों का उपयोग करने के अन्य तरीके हैं प्रयोगकर्ता का अनुभव ।

पर एक नज़र डालें श्री फिस्क की साइट , द्वारा डिज़ाइन किया गया बीएमओ , और आप एक अलग तरह के लंबन पर जा रहे हैं: आपके माउस आंदोलनों के जवाब में, इसकी चमकदार रंगीन मुख्य छवि 3 डी में चलती है।

[2 9]

सुपर-फास्ट सीएसएस के लिए 5 टिप्स

यह एक प्रभावशाली प्रभाव है जो लागू करने के लिए बहुत कठिन नहीं है; बस अपनी साइट को गहराई की आकर्षक भावना देने के लिए इन चरणों का पालन करें।

परफेक्ट के साथ अपनी खुद की आकर्षक साइट बनाएं वेब होस्टिंग सेवा और वेबसाइट निर्माता उपकरण। और, रास्ते के साथ, अपनी डिजाइन फ़ाइलों को सर्वश्रेष्ठ में सहेजें घन संग्रहण ।

01. एचटीएमएल शुरू करें

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

 & lt;! डॉक्टाइप एचटीएमएल और जीटी;
& lt; html & gt;
& lt; हेड और जीटी;
& lt; शीर्षक & gt; माउस स्क्रॉल & lt; / शीर्षक & gt;
& lt; लिंक rel = "stylesheet" प्रकार = "टेक्स्ट / सीएसएस" Href = "styles.css" / & gt;
& lt; स्क्रिप्ट src = "code.js" & gt; & lt; / स्क्रिप्ट & gt;
& lt; / सिर & gt;
& lt; शरीर & gt;
*** चरण 2 यहाँ
& lt; / शरीर & gt;
& lt; / html & gt;

02. सामग्री तत्व

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

 & lt; अनुच्छेद डेटा-लंबन और जीटी;
  & lt; div & gt; & lt; / div & gt;
  & lt; div & gt; & lt; / div & gt;
  & lt; div & gt; & lt; / div & gt;
& lt; / अनुच्छेद & gt;

03. लंबन कंटेनर शैली

'Styles.css' नामक एक नई फ़ाइल बनाएं। इस फ़ाइल में नियमों का पहला सेट लंबन कंटेनर और इसकी स्थिति मोड का डिफ़ॉल्ट आकार सेट करता है। सापेक्ष स्थिति का उपयोग करना महत्वपूर्ण है ताकि जहां भी कंटेनर स्थित हो, बच्चे के तत्वों को रखा जा सके। चौड़ाई और ऊंचाई अधिकतम अंतःक्रियाशीलता की अनुमति देने के लिए पूर्ण स्क्रीन को कवर करने के लिए सेट की जाती है।

 [डेटा-लंबन] {
  स्थिति: रिश्तेदार;
  चौड़ाई: 100vw;
  ऊंचाई: 100 वीएच;
}

04. लंबन बच्चे

डेटा-लंबन कंटेनर के अंदर पहले स्तर के तत्वों में से प्रत्येक का आकार होता है और केंद्रीय रूप से दिखाई देने के लिए तैनात किया जाता है। माता-पिता सापेक्ष स्थिति के साथ, प्रतिशत माप इकाई के रूप में उपयोग किया जाता है, जो लंबन कंटेनर के संबंध में आकार देने और स्थिति को स्थापित करने की इजाजत देता है। इस उदाहरण के लिए, प्रभाव को प्रदर्शित करने के लिए एक पारदर्शी लाल पृष्ठभूमि का उपयोग किया जाता है - आप इसे @background: URL ("आपकी छवि यहां") का उपयोग करके अपनी पसंद की पीएनजी या एसवीजी छवि के साथ इसे प्रतिस्थापित कर सकते हैं।

 [डेटा-लंबन] & gt; * {
  स्थिति: पूर्ण;
  चौड़ाई: 50%;
  ऊंचाई: 50%;
  बाएं: 25%;
  शीर्ष: 25%;
  सीमा: 1 पीएक्स ठोस # 000;
  पृष्ठभूमि: आरजीबीए (255,0,0, .25)
}

05. जावास्क्रिप्ट को आरंभ करें

'Code.js' नामक एक नई फ़ाइल बनाएं। जावास्क्रिप्ट का उपयोग उपयोगकर्ता के माउस इंटरैक्शन के जवाबों को नियंत्रित करने के लिए किया जाएगा। हम जावास्क्रिप्ट को पूरी तरह से लोड होने तक जावास्क्रिप्ट कोड को चलाने के लिए नहीं चाहते हैं, इसलिए चरण 06 और 07 के लिए कोड लोड इवेंट द्वारा ट्रिगर किए गए फ़ंक्शन को रखकर, जो विंडो को लोड करने पर सक्रिय होता है।

[7 9] window.addeventlistener ("लोड", फ़ंक्शन () { *** चरण 6 यहाँ });

06. नोड खोज

पृष्ठ तैयार होने के तुरंत बाद जावास्क्रिप्ट की पहली गतिविधि सभी लंबन परतों को ढूंढना है। सबसे पहले, लंबन कंटेनर पाए जाते हैं, उनके बच्चों के बाद। प्रत्येक बच्चे के पास 'डेटा-इंडेक्स' विशेषता के तहत उनके लिए एक इंडेक्स नंबर लागू होता है।

[7 9] एआर नोड्स = दस्तावेज़। प्रश्नोत्तरकर्ता ("[डेटा-लंबन]"); के लिए (var i = 0; i & lt; nodes.length; i ++) { var बच्चों = नोड्स [i]। चिल्ड्रेन; के लिए (var n = 0; n & lt; बच्चे। length; n ++) { बच्चे [एन]। SsetTribute ("डेटा-इंडेक्स", एन + 2); } *** चरण 7 यहाँ }

07. लंबन श्रोताओं

अंतिम चरण लंबन कंटेनर पर होने वाले किसी भी माउस आंदोलन के लिए एक ईवेंट श्रोता को लागू करना है। ऐसी कोई भी कार्रवाई माउस स्थिति और चरण 06 में परिभाषित डेटा-इंडेक्स विशेषता के आधार पर लंबन परतों की नई स्थिति की गणना करने के लिए एक सुविधा को ट्रिगर करती है - जिसके परिणामस्वरूप प्रत्येक परत विभिन्न पैसों पर अद्यतन होती है। प्रत्येक गणना का नतीजा शैली विशेषता के माध्यम से परतों पर लागू होता है।

[7 9] नोड्स [i] .AddeventListener ("Mousemove", समारोह (ई) { var elms = this.children; के लिए (var c = 0; c & lt; elms.length; c ++) { var divisor = parseint (एल्म्स [सी] .gettribute ("डेटा-इंडेक्स")); var startx = this.offsetwidth / 4; var starty = this.offsetheight / 8; एल्म्स [सी] .style.left = startx - ((e.Screenx / divisor) -e.clientx) / 3) + "पीएक्स"; एल्म्स [सी] .style.top = स्टार्टी - (((e.creeny / divisor) -e.clienty) / 3) + "पीएक्स"; } });

यह लेख मूल रूप से रचनात्मक वेब डिज़ाइन पत्रिका के अंक 272 में प्रकाशित किया गया था [9 6] वेब डिजाइनर

। यहां 272 जारी करें या वेब डिजाइनर की सदस्यता लें ।

संबंधित आलेख:

[2 9]

जावास्क्रिप्ट के साथ एसवीजी एनिमेट करें

वेबजीएल के साथ तरल प्रभाव बनाएँ

क्रॉस-ब्राउज़र संगतता मुद्दों से बचने के 10 तरीके

Create an interactive parallax image

01. एचटीएमएल शुरू करें

02. सामग्री तत्व

03. लंबन कंटेनर शैली

04. लंबन बच्चे

05. जावास्क्रिप्ट को आरंभ करें

06. नोड खोज

07. लंबन श्रोताओं

कैसे करना है - सर्वाधिक लोकप्रिय लेख

8 अत्याधुनिक सीएसएस विशेषताएं (और उनका उपयोग कैसे करें)

How to create a video game character in ZBrush

Use WordPress as a headless CMS

How to emphasise the focal point of an image

Create stunning landscapes in Houdini

तेल चित्रकला के साथ कैसे शुरू किया जाए

How to make a realistic sports car render

15 tips for cross-device optimisation

श्रेणियाँ