() translation by (you can also view the original English article)
पैरलैक्स स्क्रॉलिंग एक दिलचस्प तकनीक है, जैसे ही आप स्क्रॉल करते हैं, पृष्ठभूमि छविया अग्रभूमि सामग्री की तुलना में धीमी दिखाई देती है, जिससे 3D गहराई का भ्रम पैदा होता है। जैसा कि मैंने अपनी निजी वेबसाइट को फिर से डिजाइन करने की योजना बनाई थी, मेरा सबसे पहला लक्ष्य सबसे अधिक अद्भुतता प्राप्त करने के लिए सबसे छोटा और सरल कोड लिखना था! मैं आपको दिखाता हूँ कि मैंने यह कैसे किया।
यदि आप अपने विषय के लिए एक बुनियादी टेम्पलेट के साथ आरंभ करने का एक त्वरित तरीका तलाश रहे हैं, तो एक सरल पैरलैक्स थीम ढूंढना एक अच्छा विकल्प हो सकता है। या हमारे एक पृष्ठ टेम्पलेट्स के माध्यम से ब्राउज़ करें। आप एनवाटो स्ट्यूडिओ पर सेवा प्रदाता को भी पा सकते हैं जो आपके लिए पैरलैक्स स्क्रॉलिंग साइट बनाएंगे।
इस ट्यूटोरियल में, मैं आपको सबसे आसान पैरलैक्स स्क्रॉलिंग तकनीक को सिखाऊंगा जो आपने कभी नहीं देखा है, तो हम इसमें प्रवेश करते हैं!
चरण 1: मार्कअप
यह तकनीक पृष्ठभूमि छवि की गति को नियंत्रित करने के चारों ओर घूमती है। तो हम HTML मार्कअप से शुरू करते हैं, आवश्यक विशेषताओं के साथ दो खंड बनाते हैं: "data-type" और "data-speed"। डोंट वोर्री; मैं ये बाद में समझाऊंगा।
1 |
<section id="home" data-type="background" data-speed="10"> |
2 |
</section>
|
3 |
|
4 |
<section id="about" data-type="background" data-speed="10"> |
5 |
</section>
|
मैं एट्रिब्यूट data-type और data-speed के साथ <section> टैग का उपयोग कर रहा हूं, जो कि HTML5 में पेश किया गया था। यह HTML मार्कअप क्लीन और पढ़ने में आसान बनाता है।
कस्टम डेटा विशेषताओं के लिए विनिर्देश (स्पेसफकैशन्ज़) के अनुसार, data- के साथ शुरू होने वाले किसी भी विशेषता को निजी डेटा के लिए एक संग्रहण क्षेत्र माना जाएगा। इसके अतिरिक्त, यह लेआउट या प्रस्तुति को प्रभावित नहीं करेगा।
चूंकि हमें जो कुछ करना है, पृष्ठभूमि छवियों की गति को नियंत्रित करना है, इसलिए हम आवश्यक पैरामीटर निर्दिष्ट करने के लिए data-type="background" और data-speed="10" कुंजी विशेषताओं का उपयोग करेंगे।
मुझे पता है कि आप क्या सोच रहे हैं: आप IE के बारे में चिंतित हैं। कभी नहीं डरो; मेरे पास इसके लिए एक वैकल्पिक हल भी है! हम इसे क्षणभर चर्चा करेंगे।
इसके बाद, चलिए प्रत्येक <section> में <article> टैग के अंदर सामग्री डालते हैं।
1 |
<section id="home" data-type="background" data-speed="10" class="pages"> |
2 |
<article>I am absolute positioned</article> |
3 |
</section>
|
4 |
|
5 |
<section id="about" data-type="background" data-speed="10" class="pages"> |
6 |
<article>Simple Parallax Scroll</article> |
7 |
</section>
|
हम जिस चीज को यहाँ करने की कोशिश कर रहे हैं वह है सामग्री, i.e, <article> की तुलना में धीमी गति से <section> पृष्ठभूमि स्क्रॉल करें! इससे हमें एक पैरलैक्स भ्रम बनाने में मदद मिलेगी। jQuery जादू पर जाने से पहले, हम प्रत्येक <section> के लिए हमारे सीएसएस (CSS) में पृष्ठभूमि छवियाँ जोड़ते हैं।
1 |
|
2 |
#home { |
3 |
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; |
4 |
}
|
5 |
|
6 |
#about { |
7 |
background: url(about-bg.jpg) 50% 0 no-repeat min-height: 1000px; |
8 |
}
|
दोनों वर्गों के लिए पृष्ठभूमि (बैक्ग्राउन्ड) जोड़ने पर, यह दिखना चाहिए:
चलो कुछ और सीएसएस (CSS) को स्टाइल में जोड़ें और पेज को मसाला दें!
1 |
#home { |
2 |
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; |
3 |
height: 1000px; |
4 |
margin: 0 auto; |
5 |
width: 100%; |
6 |
max-width: 1920px; |
7 |
position: relative; |
8 |
}
|
9 |
|
10 |
#home article { |
11 |
height: 458px; |
12 |
position: absolute; |
13 |
text-align: center; |
14 |
top: 150px; |
15 |
width: 100%; |
16 |
}
|
17 |
|
18 |
#about { |
19 |
background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; |
20 |
height: 1000px; |
21 |
margin: 0 auto; |
22 |
width: 100%; |
23 |
max-width: 1920px; |
24 |
position: relative; |
25 |
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); |
26 |
box-shadow: 0 0 50px rgba(0,0,0,0.8); |
27 |
}
|
28 |
|
29 |
#about article { |
30 |
height: 458px; |
31 |
position: absolute; |
32 |
text-align: center; |
33 |
top: 150px; |
34 |
width: 100%; |
35 |
}
|
अब इसे इस तरह दिखना चाहिए ...
चरण 2: जादू कोड
हां, यह सही है; यह वह जगह है जहां जादू शुरू होता है! jQuery का उपयोग करके, हम मानक document.ready() से शुरू करेंगे यह सुनिश्चित करने के लिए कि पेज लोड हो चुका है और हेरफेर करने के लिए तैयार है।
1 |
$(document).ready(function(){
|
2 |
|
3 |
|
4 |
}); |
यह तकनीक पृष्ठभूमि छवि की गति को नियंत्रित करने के चारों ओर घूमती है जो कि दोनों वर्गों में मौजूद है।
अब मुझे आपका ध्यान यहाँ पर चाहिए। नीचे आने वाली पहली बात यह है कि हम पृष्ठ के प्रत्येक <section> पर फिर से चल रहे हैं, जिस पर ऐट्रब्यूट data-type="background" है।
1 |
$(document).ready(function(){
|
2 |
|
3 |
$('section[data-type="background"]').each(function(){
|
4 |
var $bgobj = $(this); // assigning the object |
5 |
}); |
6 |
|
7 |
}); |
किसी अन्य फ़ंक्शन को जोड़ें, .scroll (), अंदर .each (), जिसे उपयोगकर्ता के स्क्रॉलिंग शुरू होने पर लागू किया जाता है।
1 |
$(window).scroll(function() {
|
2 |
|
3 |
}); |
हमें यह निर्धारित करने की आवश्यकता है कि उपयोगकर्ता ने कितना स्क्रॉल किया, और फिर मार्कअप में उल्लेखित data-speed वैल्यू के अनुसार मूल्य को विभाजित करें।
1 |
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
|
$window.scrollTop (): हम शीर्ष से चालू स्क्रॉल मान प्राप्त कर रहे हैं। यह मूल रूप से निर्धारित करता है कि उपयोगकर्ता ने कितनी स्क्रॉल किया है। $bgobj.data('speed') मार्कअप में निर्दिष्ट data-speed को संदर्भित करता है, और yPos अंतिम मूल्य है जिसे हमें स्क्रॉलिंग के लिए प्रयोग करने की आवश्यकता है। हालांकि, यह एक नेगटिव मान होगा, क्योंकि हमें पृष्ठभूमि के विपरीत दिशा में उपयोगकर्ता के स्क्रॉल को स्थानांतरित करना होगा।
एक उदाहरण के साथ थोड़ा और अधिक जांचें:
उपरोक्त छवि में, data-speed 10 है, और मान लीजिए कि ब्राउज़र विंडो में 57px स्क्रॉल किया गया है। इसका मतलब है कि जब 57px को 10 से विभाजित किया जाता है, तो परिणाम 5.7px है।
1 |
// Put together our final background position |
2 |
var coords = '50% '+ yPos + 'px'; |
3 |
|
4 |
// Move the background |
5 |
$bgobj.css({ backgroundPosition: coords });
|
आखिरी चीज जो हमें करने की ज़रूरत है वह एक वेरीअबल में हमारे अंतिम पृष्ठभूमि की स्थिति को एक साथ रखनी है। पृष्ठभूमि की क्षैतिज (हॉरिज़ान्टल) स्थिति स्थिर रखने के लिए, हमने 50% को xPosition के रूप में निर्दिष्ट किया है। फिर, हमने yPos को yPosition के रूप में जोड़ा, और अंत में, हमारे <section> पृष्ठभूमि: $bgobj.css({ backgroundPosition:coords }); को पृष्ठभूमि निर्देशांक निर्दिष्ट किया।
आपका अंतिम कोड ऐसा दिख सकता है:
1 |
$(document).ready(function(){
|
2 |
$('section[data-type="background"]').each(function(){
|
3 |
var $bgobj = $(this); // assigning the object |
4 |
|
5 |
$(window).scroll(function() {
|
6 |
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
|
7 |
|
8 |
// Put together our final background position |
9 |
var coords = '50% '+ yPos + 'px'; |
10 |
|
11 |
// Move the background |
12 |
$bgobj.css({ backgroundPosition: coords });
|
13 |
}); |
14 |
}); |
15 |
}); |
याय, हमने यह किया है! इसे स्वयं के लिए प्रयास करें।
IE Fix
एक अंतिम निदान है: पुराने IE <section> और <article> टैग को प्रस्तुत नहीं कर सकता है। यह ठीक करना आसान है, यद्यपि; हम तत्वों को बनाने के लिए मानक समाधान का उपयोग करेंगे, जिससे ब्राउज़र ने जादुई रूप से HTML5 टैग को पहचान लिया।
1 |
// Create HTML5 elements for IE |
2 |
|
3 |
document.createElement("article");
|
4 |
document.createElement("section");
|
साथ ही, हमें सभी ब्राउज़रों को अच्छी तरह से काम करने के लिए मूल सीएसएस रीसेट (CSS reset) फाइल का उपयोग करना होगा। सौभाग्य से, टूल जैसे, एचटीएमएल 5 बॉयलरप्लेट हमारे लिए काम की खामियों का ख्याल रखता है, जब क्रॉस-ब्राउज़र सामान्यकरण की बात आती है।
यह अध्याय के लिए पर्याप्त है! कोई प्रश्न या नोट जो आप जोड़ना चाहते हैं? मुझे नीचे बताओ!
और अगर आप पेशेवर परिणामों के साथ एक त्वरित समाधान की तलाश कर रहे हैं, तो हमारे पैरलैक्स थीम और एक पृष्ठ टेम्पलेट विकल्पों के माध्यम से / को ब्राउज़ करें, थीमफॉरस्ट (Themeforest) पर खरीदारी के लिए उपलब्ध है।
