Stellar.js का उपयोग कर एक पैराल्लास स्क्रॉलिंग वेबसाइट बनाएं

हाल के आधुनिक वेब डिज़ाइन में सबसे बड़े रुझानों में से एक पैराल्लास स्क्रॉलिंग इफेक्ट्स का उपयोग है। इस ट्यूटोरियल में मैं आपको यह दिखाने वाला हूँ कि आप अपनी वेबसाइट पर इफ़ेक्ट कैसे बना सकते हैं, थोड़ा कल्पना और Stellar.js से थोड़ी मदद के साथ।

परिचय

Nike's Better World जैसी साइटों ने कुछ साल पहले अपनी वेबसाइटों पर यह पेश किया था, तब से पैराल्लास स्क्रॉलिंग इफ़ेक्ट लोकप्रिय रहा है। इंटरफेस के संबंध में पैराल्लास इफ़ेक्ट 1980 के दशक के आसपास हुआ है जब यह पहली बार वीडियो गेम के खिताब में इस्तेमाल किया गया था। और बाद में in games themselves भी। हाल ही में यह वेब इंटरफेस में एक उपस्थिति बनाने शुरू कर दिया - आप silverbackapp से परिचित होंगे, जो इफ़ेक्ट के साथ हीडर के भाग के रूप में इस्तेमाल करेंगे।

जब एक वेबसाइट को स्क्रॉलिंग की कार्यक्षमता के साथ मिलाया जाता है, तो पैराल्लास स्क्रॉलिंग इफेक्ट्स का एक मजबूत दृश्य पैराल्लास हो सकता है, खासकर जब some form of story की कहानी के साथ मिलाया जाता है जो आपको किसी यात्रा पर ले जाता है।

पैरा ... क्या?

पैराल्लास दृष्टि की दो अलग-अलग लाइनों के साथ एक ऑब्जेक्ट की स्पष्ट स्थिति में विस्थापन या अंतर है। - - Wikipedia

तो पैराल्लास वास्तव में क्या है? वैसे यह संभवत: उन चीजों में से एक है जो आपके क्लाइंट का उल्लेख करते हैं जब वे अंधी तौर से कहते हैं "मुझे मेरी साइट HTML5 चाहिए"। जब भी ग्राहक "HTML5" साइट के लिए मुझसे पूछते हैं, मुझे उनसे विशेष रूप से पूछना होता है कि वे किस तरह HTML5 अर्थ की व्याख्या करते हैं - इस समय यह ऐसा लगता है कि ग्राहक वास्तव में समझते हैं कि इसका अर्थ क्या है, बिना मुझे कहता है।

तो क्या यह HTML5 है? यकीन है कि HTML5 पैराल्लास स्क्रॉलिंग इफ़ेक्ट में खेलने का एक हिस्सा है, लेकिन यह HTML5 से भी ज्यादा है, यह कुछ javascript का भी इस्तेमाल करता है, जैसे कि jQuery, और CSS3 के बिना संभव नहीं होगा।

वास्तविक शब्द पैराल्लास ग्रीक παραλλαξη (पैरालक्सिस) से व्युत्पन्न होता है जिसका अर्थ है परिवर्तन। ऑब्जेक्ट जो आंखों के करीब हैं, उन वस्तुओं की तुलना में एक बड़ा पैराल्लास है जो दूरी में हैं। इसका मतलब यह है कि वस्तुओं जो हमारे करीब हैं बैकग्राउंड में वस्तुओं की तुलना में तेज़ी से आगे बढ़ने के लिए दिखाई दे सकती हैं।

एकाधिक बैकग्राउंड और ऑब्जेक्ट्स (जैसे इमेजेज) को ऊपर लेयर करना और फिर उन्हें अलग-अलग गति से स्थानांतरित करने की अनुमति देकर गहराई और आयाम की सनसनी पैदा हो जाती है।

एक्शन में पैराल्लास

कुछ उदाहरणों पर एक नज़र डालें जो पैराल्लास इफेक्ट्स दिखाते हैं।

हर वेबसाइट एक कहानी बताती है

सब से ऊपर के उदाहरण आपको किसी प्रकार के यात्रा या कहानी पर ले जाते हैं, और वे विभिन्न तरीकों से ऐसा करते हैं यह, मेरी राय में, जो एक पैराल्लास स्क्रॉलिंग साइट को सफलता प्रदान करता है। यह दिलचस्प और अनोखी बनाने की key एक अच्छी कहानी और अवधारणा पर केंद्रित है, फिर रचनात्मक और कल्पनाशील तरीकों में पैराल्लास का उपयोग कर।

Wieden+Kennedy (W&K), नाइकी बेस्ट वर्ल्ड वेबसाइट के पीछे वाले लोग इस का समर्थन करते हैं:

हमारी राय में, प्रौद्योगिकियां अवधारणा से स्वतंत्र हैं। हमारा प्राथमिक ध्यान एक महान इंटरैक्टिव कहानी कहने का अनुभव बनाने पर था। - Wieden+Kennedy (W&K)

हमारी साइट कैसे काम करेगी

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

यहां बताया गया है कि कैसे हमारी फ़ोल्डर संरचना दिखाई देगी:

उपयोग किए गए प्लगइन्स

Stellar.js

इसे प्राप्त करने में मेरी सहायता के लिए, मैं Mark Dalgleish द्वारा एक जेक्जरी प्लगइन, Stellar.js का उपयोग कर रहा हूं जो पैराल्लास स्क्रॉलिंग साइट को बनाने में आसान बनाता है। इस आलेख के निचले भाग में सूचीबद्ध किए गए मेरी मदद करने के लिए अन्य प्लगइन्स उपलब्ध हैं। मैंने Stellar.js का इस्तेमाल करने का विकल्प चुना है क्योंकि यह बहुत ही सरल है और इस ट्यूटोरियल के दौरान प्रदर्शित नहीं किया गया है, लेकिन यह iOS जैसे स्मार्ट डिवाइस प्लेटफार्मों पर काम करने के लिए अनुकूलित किया जा सकता है।

Waypoints.js

मैं भी Caleb Troughton द्वारा jQuery के रास्ते बिंदुओं का उपयोग करने जा रहा हूं। वेपॉइंट्स एक और jQuery प्लगइन है जो एक फ़ंक्शन निष्पादित करता है जब भी आप किसी तत्व को स्क्रॉल करते हैं। इससे साइट पर नेविगेशन को स्क्रॉलबार की स्थिति के अनुसार हम कौन सी स्लाइड पर प्रकाश डालने की अनुमति देता है।

jQuery Easing

GSGD से एक प्लगइन है जो उन्नत सहज विकल्प प्रदान करता है। हम इसे स्लाइड से स्लाइड में परिवर्तित होने पर एक अच्छा सहजता आंदोलन जोड़ने के लिए इसका उपयोग करेंगे।

The HTML Markup

हमारी index.html को बंद करना हम HTML5 doctype को जोड़ते हैं और फिर हेड सेक्शन बनाते हैं। यह एक CSS Reset के साथ हमारे स्टाइल शीट 'styles.css' के बाद होता है। हम फिर हमारे कस्टम jQuery फ़ाइल 'js.js' के बाद jQuery पुस्तकालय जोड़ें। इसके बाद तीन प्लगइन्स, 'jquery.stellar.min.js', 'waypoints.min.jsquery.easing.1.3.js' द्वारा पीछा किया जाता है।

1

<!DOCTYPE HTML>

2

<html>

3

<head>

4

<meta charset="utf-8">

5

<title>Create a parallax Website using Stellar.js</title>

6

7

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">

8

<link rel="stylesheet" type="text/css" href="css/style.css">

9

10

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

11

<script type="text/javascript" src="js/js.js"></script>

12

<script type="text/javascript" src="js/jquery.stellar.min.js"></script>

13

<script type="text/javascript" src="js/waypoints.min.js"></script>

14

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

15

16

</head>

हमारे HTML में अगले तत्व एन्वाटो लोगो की इमेज है जो पूरी साइट पर एक निरंतर निश्चित स्थिति में रहता है। इसके लिए हम 'envatologo' का एक class जोड़ते हैं ताकि हम इसके बाद की स्थिति को सेट कर सकें जब हम CSS कोड करेंगे।

1

<img class="envatologo" src="images/envatologo.png">

स्लाइड्स

चार स्लाइड्स एक ही मार्कअप का उपयोग करते हैं:

1

2

	<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">  		  		  		

3

		<a class="button" data-slide="2" title=""></a>  	

4

	</div><!--End Slide 1-->

हम 'slide' के एक class का उपयोग करते हैं जो सभी स्लाइड्स के लिए सामान्य स्टाइल के रूप में उपयोग किया जाएगा। तब प्रत्येक स्लाइड को 'slide' का एक id दिया जाता है, उसके बाद स्लाइड नंबर यानी 'Slide1'। हम HTML5 डेटा विशेषता का उपयोग करते हैं और इसे 'data-slide' नाम देते हैं। यह हमें jQuery का उपयोग करके इसे लक्षित करने की अनुमति देगा। 'डेटा-स्टेलर-बैकग्राउंड-रेश्यो' का एक अन्य डेटा विशेषता जोड़ा गया है। यह stellar.js jQuery के प्लगइन के लिए विशिष्ट है और प्लगइन को उस अनुपात में बताता है कि तत्व की गति को स्क्रॉल करना चाहिए।

अनुपात प्राकृतिक स्क्रॉल गति के सापेक्ष है, इसलिए 0.5 का एक अनुपात तत्व को आधा गति पर स्क्रॉल करने के कारण होता है, 1 के अनुपात में कोई इफ़ेक्ट नहीं होता है, और 2 का अनुपात तत्व को दो बार गति से स्क्रॉल करने का कारण रखता है।

स्लाइड चार को छोड़कर सभी स्लाइड्स के पास एक बटन है जो हमें अगली स्लाइड पर स्क्रॉल करने की अनुमति देगा। इसके लिए हम अगले स्लाइड नंबर के मूल्य के साथ 'data-slide' विशेषता जोड़ते हैं। ऐसा इसलिए है कि बटन को पता है कि क्या स्लाइड अगला है ताकि हम यह मान jQuery पर कर सकें। सकें। ज्यादातर स्लाइड्स में 'slideno' के एक class के साथ एक अवधि होती है; बस स्लाइड संख्या का एक बड़ा टेक्स्ट संस्करण जो अधिकांश स्लाइड्स के निचले बाएं हाथ के कोने में दिखाई देता है। यह भी खिताब के लिए इस्तेमाल किया जा सकता है।

1

<span class="slideno">Slide 1</span>

तीन और चार स्लाइड पर हम 'slide' div में कुछ इमेज तत्व भी जोड़ते हैं। ये इमेजेज हम पैराल्लास इफ़ेक्ट में एक वास्तविक अंतर्दृष्टि देंगे जो हम बना रहे हैं। हम इन्हें 'wrapper' डिवेल के अंदर लपेटते हैं जो कि केंद्रीकृत और '960px' चौड़ा हो, यह सिर्फ यह सुनिश्चित करने के लिए है कि यह सभी डेस्कटॉप मॉनिटर आकारों में ठीक दिखाता है।

प्रत्येक चित्र में 'data-stellar-ratio' विशेषता संलग्न है। यह फिर से तारकीय..js विशिष्ट है और प्लगइन को बताता है कि किस गति के अनुपात में हमे तत्व को स्क्रॉल करना चाहिए।

1

<div class="wrapper">

2

3

			<img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt="">

4

			<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">

5

			<img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt="">

6

			<img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt="">

7

			<img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt="">

8

			<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt="">

9

10

</div>

सीएसएस

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

हमारे CSS के साथ करने की हमारी पहली चीज है @ फ़ॉन्ट-चेहरे का उपयोग करके BEBAS फ़ॉन्ट में। हम उस साइट को फ़ॉन्ट सेट करने के लिए html में जोड़ते हैं। हमने html और बॉडी की चौड़ाई और ऊंचाई 100% तक भी सेट की है। यह हमारी स्लाइड्स को उपयोगकर्ता की स्क्रीन की पूरी चौड़ाई और ऊंचाई अपनाने की अनुमति देगा।

1

2

@font-face {  

3

	font-family: 'BebasRegular';  

4

	src: url('font/BEBAS___-webfont.eot');  

5

	src: url('font/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),     

6

	url('font/BEBAS___-webfont.woff') format('woff'),     

7

	url('font/BEBAS___-webfont.ttf') format('truetype'),     

8

	url('font/BEBAS___-webfont.svg#BebasRegular') format('svg');  

9

	font-weight: normal;  

10

	font-style: normal;  

11

	}  

12

13

html,body{ 

14

	font-family: 'BebasRegular';  	

15

	width:100%;  	

16

	height:100%;  

17

}

नेविगेशन

मुख्य नेविगेशन को साइट पर एक ही जगह में रखने के लिए एक 'fixed' स्थिति दी गई है। हम इस 20px को ऊपर से थोड़ी सी जगह देने के लिए ऊपर से ऑफसेट करते हैं और यह z-index को 1 सेट करने के लिए सुनिश्चित करें कि यह साइट के शीर्ष स्तर पर है।

वास्तविक सूची केवल एक रेखांकन के रूप में कार्य करने के लिए नीचे की सीमा के साथ टेक्स्ट की शैली है। इसमें 53px की चौड़ाई है। एक संक्रमण भी जोड़ा जाता है ताकि यह अपने मानक राज्य से अपने होवर राज्य को एनिमेट कर सके। मैंने कोड को छोटा रखने के लिए यहां- webkit- prefix का उपयोग किया है, लेकिन पूर्ण स्रोत कोड जो उपरोक्त डाउनलोड किया जा सकता है, जिसमें सभी विक्रेता उपसर्ग शामिल हैं।

हॉवर स्टेट क्लास 'active' के समान गुणों का उपयोग करता है; मूल रूप से सिर्फ फ़ॉन्ट आकार और चौड़ाई में वृद्धि। 'active' क्लास का उपयोग jQuery के द्वारा प्रासंगिक स्लाइड को स्टाइल के लिए किया जाता है जो कि ब्राउज़र विंडो के दृश्य में है।

1

2

.navigation {  	

3

	position:fixed;  	

4

	z-index:1;  	

5

	top:20px;  

6

}  

7

.navigation li {  	

8

	color:#333333;  	

9

	display:block;  	

10

	padding: 0 10px;  	

11

	line-height:30px;  	

12

	margin-bottom:2px;  	

13

	font-weight:bold;  	

14

	-webkit-transition: all .2s ease-in-out;  	

15

	border-bottom:1px solid black;  	

16

	text-align:left;  	

17

	width:53px;  

18

}  

19

.navigation li:hover,

20

.active {  	

21

	font-size:25px;  	

22

	cursor:pointer;  	

23

	width:100px!important;  

24

}

Envato logoको कुछ पोजीशनिंग स्टाइल्स दी गई हैं यह सुनिश्चित करने के लिए कि यह स्क्रीन के केंद्र में बनी हुई है। इसी तरह नेविगेशन के लिए यह '1' के a z- इंडेक्स भी दिया गया है ताकि यह सुनिश्चित हो सके कि यह शीर्ष पर रहता है।

1

2

.envatologo {  

3

	position:fixed;  

4

	top:50%;  

5

	left:50%;  

6

	width:446px;  

7

	margin-top:-41px;  

8

	margin-left:-223px;  

9

	z-index:1;  

10

}

अब हम वास्तविक स्लाइड्स के स्टाइल पर जाते हैं। हम उन्हें बैकग्राउंड-अटैचमेंट 'fixed' संपत्ति देते हैं। बैकग्राउंड-अटैचमेंट 'fixed' संपत्ति देते हैं। बैकग्राउंड-अटैचमेंट संपत्ति निर्धारित करती है कि बैकग्राउंड इमेज तय हो गई है या शेष पृष्ठ के साथ स्क्रॉल की गई है, इसलिए बैकग्राउंड-इमेजेज (जैसे स्लाइड चार पर उपयोग के लिए) में उपयोगी होता है। इस उदाहरण के लिए हमने Philipp Seiffert की एक वॉलपेपर का इस्तेमाल किया है जिसे here डाउनलोड किया जा सकता है। हमने स्लाइड की स्थिति 'relative' पर सेट की है। ऐसा करने के लिए वास्तविक स्लाइड का विरोध करते हुए हम स्लाइड्स के खिलाफ classes 'slideno' और 'button' को पूर्ण रूप से पेश कर सकते हैं।

बॉक्स शैडो पूरी तरह से सजावट के प्रयोजनों के लिए है और प्रत्येक स्लाइड के शीर्ष इंसेट में एक अच्छी ड्राप शैडो जोड़ती है।

1

.slide {

2

	background-attachment: fixed;

3

	width:100%;

4

	height:100%;

5

	position: relative;

6

	box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);

7

}

8

.wrapper {

9

	width:960px;

10

	height:200px;

11

	margin:0 auto;

12

	position:relative;

13

}

14

.slideno {

15

	position:absolute;

16

	bottom:0px;

17

	left:0px;

18

	font-size:100px;

19

	font-weight:bold;

20

	color:rgba(255,255,255,0.3);

21

}

.बटन पृष्ठ के नीचे बटन के लिए है जो हमें अगली स्लाइड पर प्रगति करने की अनुमति देता है। हमने इसे प्रत्येक स्लाइड के नीचे केंद्र पर रखा है और हमने संकेतक के रूप में एक एरो की इमेज का उपयोग किया है।

1

.button{

2

	display:block;

3

	width:50px;

4

	height:50px;

5

	position:absolute;

6

	bottom:0px;

7

	left:50%;

8

	background-color:#333333;

9

	background-image:url(../images/arrow.png);

10

	background-repeat:no-repeat;

11

}

12

.button:hover{

13

	background-color:#494949;

14

	cursor:pointer;

15

}

प्रत्येक व्यक्ति की स्लाइड के लिए स्टाइल अपेक्षाकृत सरल है और हर बार एक ही पैटर्न का पालन करता है। स्लाइड के पास '# 5c9900' का बैकग्राउंड रंग है। दो स्लाइड पर बैकग्राउंड रंग सेट भी है। स्लाइड दो में चित्र भी हैं और हम प्रत्येक CSS चयनकर्ता nth-child (n) का उपयोग करके लक्ष्य कर सकते हैं। इस चयनकर्ता को इस रूप में वर्णित किया जा सकता है

यह pseudo श्रेणी वाले तत्व मूल तत्वों की सूची के भीतर स्थित हैं।

इसलिए हम मूल रूप से प्रत्येक इमेज को अपने मार्कअप में दिखाई देने के क्रम में स्टाइल कर रहे हैं। हम बस स्लाइड के आवरण के मुकाबले उन्हें स्थितिबद्ध कर रहे हैं।

1

/******************************

2

 SLIDE 1 

3

*******************************/

4

#slide1{

5

	background-color:#5c9900;

6

7

}

8

/******************************

9

 SLIDE 2 

10

*******************************/

11

#slide2{

12

	background-color:#005c99;

13

14

}

15

#slide2 img:first-child{

16

	position:absolute;

17

top: 700px;

18

left: -150px;

19

}

20

#slide2 img:nth-child(2){

21

	position:absolute;

22

	top:300px;

23

	left:100px;

24

}

25

#slide2 img:nth-child(3){

26

	position:absolute;

27

	top:600px;

28

	left:300px;

29

}

30

#slide2 img:nth-child(4){

31

	position:absolute;

32

	top:400px;

33

	left:300px;

34

}

35

#slide2 img:nth-child(5){

36

	position:absolute;

37

	top:600px;

38

	right:300px;

39

}

40

#slide2 img:nth-child(6){

41

	position:absolute;

42

	top:600px;

43

	right:300px;

44

}

45

#slide2 img:nth-child(7){

46

	position:absolute;

47

	top:400px;

48

	right:100px;

49

}

50

#slide2 img:nth-child(8){

51

	position:absolute;

52

	top:100px;

53

	right:300px;

54

}

स्लाईड तीन स्लाइड के समान ही सूट का अनुसरण करते हैं।

1

2

/****************************** SLIDE 3 *******************************/  

3

#slide3 {  	

4

	background-color:#b6c10b;  

5

}  

6

#slide3 img:first-child {  	

7

	position:absolute;  

8

	top: 700px;  

9

	left: 300px; 

10

}  

11

#slide3 img:nth-child(2){  	

12

	position:absolute;  	

13

	top:100px;  	

14

	left:100px;  

15

}  

16

#slide3 img:nth-child(3){  	

17

	position:absolute;  	

18

	top:150px;  	

19

	left:300px;  

20

}  

21

#slide3 img:nth-child(4){  	

22

	position:absolute;  	

23

	top:450px;  	

24

	left:300px; 

25

}  

26

#slide3 img:nth-child(5){  	

27

	position:absolute;  	

28

	top:200px;  	

29

	right:300px;  

30

}  

31

#slide3 img:nth-child(6){  	

32

	position:absolute;  	

33

	top:100px;  	

34

	right:300px;  

35

}

स्लाइड चार पिछली दो स्लाइड्स की तुलना में थोड़ा भिन्न है क्योंकि इसमें कोई भी इमेज तत्व या बैकग्राउंड रंग नहीं है, लेकिन इसके बजाय बैकग्राउंड-इमेज का उपयोग करता है। हमने इसे 'background-size:cover' को भी CSS3 की संपत्ति दी है। यह मूल रूप से संपूर्ण ब्राउज़र विंडो को कवर करने के लिए बैकग्राउंड-इमेज सेट करता है और ब्राउज़र विंडो का आकार बदलता है। हमने पिछले स्लाइड पर टेक्स्ट की एक पंक्ति भी जोड़ दी है जिसने हमने स्टाइल किया है और 'parallaxbg' का एक वर्ग दिया है।

1

/******************************

2

 SLIDE 4 

3

*******************************/

4

5

#slide4{

6

	background-image:url(../images/Slide4/desktop4.jpg);

7

	-webkit-background-size: cover;

8

	-moz-background-size: cover;

9

	-o-background-size: cover;

10

	background-size: cover;

11

}

12

#slide4 .parallaxbg{

13

	position:absolute;

14

	right:40px;

15

	top:40px;

16

	font-size:28px;

17

	color:rgba(51,51,51,0.3);

18

}

The jQuery

JQuery वास्तव में है जहां यह बात जीवन में आने शुरू होती है। मैंने कोड पर टिप्पणी की है ताकि आप देख सकें कि वास्तव में क्या हो रहा है।

1

2

jQuery(document).ready(function ($) {

3

4

5

    //initialise Stellar.js

6

    $(window).stellar();

7

8

    //Cache some variables

9

    var links = $('.navigation').find('li');

10

    slide = $('.slide');

11

    button = $('.button');

12

    mywindow = $(window);

13

    htmlbody = $('html,body');

14

15

16

    //Setup waypoints plugin

17

    slide.waypoint(function (event, direction) {

18

19

        //cache the variable of the data-slide attribute associated with each slide

20

        dataslide = $(this).attr('data-slide');

21

22

        //If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and 

23

        //remove the active class from the previous navigation link 

24

        if (direction === 'down') {

25

            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');

26

        }

27

        // else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and 

28

        //remove the active class from the next navigation link 

29

        else {

30

            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');

31

        }

32

33

    });

34

35

    //waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class 

36

    //from navigation link slide 2 and adds it to navigation link slide 1. 

37

    mywindow.scroll(function () {

38

        if (mywindow.scrollTop() == 0) {

39

            $('.navigation li[data-slide="1"]').addClass('active');

40

            $('.navigation li[data-slide="2"]').removeClass('active');

41

        }

42

    });

43

44

    //Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery

45

    //easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.

46

    function goToByScroll(dataslide) {

47

        htmlbody.animate({

48

            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top

49

        }, 2000, 'easeInOutQuint');

50

    }

51

52

53

54

    //When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function

55

    links.click(function (e) {

56

        e.preventDefault();

57

        dataslide = $(this).attr('data-slide');

58

        goToByScroll(dataslide);

59

    });

60

61

    //When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function

62

    button.click(function (e) {

63

        e.preventDefault();

64

        dataslide = $(this).attr('data-slide');

65

        goToByScroll(dataslide);

66

67

    });

68

69

70

});

सिर्फ एक कुछ अंक

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

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

निष्कर्ष

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

मुझे आशा है कि आपको पैराल्लास स्क्रॉलिंग के बारे में पढ़ने में आनंद आया होगा और मुझे यह देखना अच्छा लगेगा कि आपने लोगों को अपनी साइट पर कैसे उपयोग किया है, नीचे दिए गए लिंक को छोड़ने के लिए बेझिझक। अगली बार तक!

आगे की कड़ियाँ पढ़ना और संसाधन

• Behind the Scenes at Nikes Better World.
• 21 Examples of Parallax Scrolling Websites.
• Scrollorama कुछ अन्य महान विशेषताओं के साथ एक पैराल्लास प्लगइन।
• Create a Sticky Navigation Header Using jQuery Waypoints