सीएसएस तकनीक

एक वेब डेवलपर के लिए, जब एक लंबन स्क्रॉलिंग प्रभाव बनाने की बात आती है, तो विभिन्न तकनीकें उपलब्ध हैं। ऐसी तकनीकों में से एक का उपयोग कर रहा हैCascaded Styling Sheets(CSS)।

CSS बताता है कि स्क्रीन पर HTML तत्व कैसे प्रदर्शित होते हैं। एक CSS फ़ाइल बना सकते हैं और इसे पूरी वेबसाइट के लिए उपयोग किया जा सकता है। प्रत्येक HTML तत्व में शैलियों को जोड़ने की तुलना में CSS फ़ाइल को जोड़ना और उन्हें वेब पेज के विभिन्न हिस्सों में प्रबंधित करना सरल है।

Note- इस अध्याय में नीचे चर्चा की गई कुछ विधियाँ डेस्कटॉप कंप्यूटर के लिए विशिष्ट हैं न कि मोबाइल उपकरणों के लिए। इसका उल्लेख उन चरणों में किया जाएगा जब एक विशेष तकनीक मोबाइल उपकरणों के लिए उपयुक्त नहीं है।

डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) में सभी अतिरिक्त ड्राइंग में सीएसएस ऑफलोड्स को ध्यान में रखते हुए, सीपीयू को बोझ किए बिना हार्डवेयर त्वरण का एक बड़ा उपयोग और एक चिकनी प्रभाव है।

निरपेक्ष स्थिति विधि

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

इस भाग में, हम निरपेक्ष स्थिति विधि के लिए दो विधियों से गुजरेंगे -

सिंगल बैकग्राउंड
एकाधिक पृष्ठभूमि

सिंगल बैकग्राउंड मेथड

इस पद्धति में, हम एक ही फ़ोल्डर में दो फाइलें बनाएंगे। उसी उद्देश्य के लिए नीचे दिए गए चरणों का पालन करें -

Step 1

हमें एक ही फ़ोल्डर में दो फाइलें बनानी होंगी: पहली फाइल HTML मार्कअप के साथ और दूसरी सीएसएस कोड के साथ।

Step 2

अब, हम अपने HTML मार्कअप को परिभाषित करते हैं। नीचे दिए गए कोड को देखें -

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   <body>  
      <div class = "BgContainer">  
         <div class = "Parallax">  
            <h1> Welcome! </h1>   
         </div>  
         <div class = "FgContainer">  
            <div class = "MainContent">  
               <p>
                  Here we will go ahead with some content which will really vary 
                  according to the content on your site. I am just typing out this 
                  content as it is sometimes good to engage user than the usual lorem 
                  ipsum text!
                  <br/>
                  <br/>  
                  
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat. Duis aute irure dolor in 
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                  culpa qui officia deserunt mollit anim id est laborum.  
                  <br/>
                  <br/>  
                  
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat. Duis aute irure dolor in 
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                  culpa qui officia deserunt mollit anim id est laborum.  
               </p>  
            </div>  
         </div>  
      </div>  
   </body> 
   
</html>

Step 3

नोटपैड खोलें। उपरोक्त कोड स्निपेट को कॉपी और पेस्ट करें।

जब आप फ़ाइल को सहेज रहे हैं, तो Save as type, चुनते हैं All Files। आवश्यकतानुसार अपनी फ़ाइल में नाम दर्ज करें, लेकिन इसके बाद एक्सटेंशन की आवश्यकता होती है -.html जैसा कि नीचे स्क्रीनशॉट में दिखाया गया है।

Step 4

फ़ाइल सहेजे जाने के बाद, नोटपैड में एक और फ़ाइल बनाएं और नीचे दिए गए कोड को पेस्ट करें -

html, body {  
   font-size: 18px;  
   line-height: 28px;  
}  

h1 {  
   letter-spacing: -15px;  
   color: white;  
   text-align: center;  
   font-size: 200px;  
   font-weight: 800;  
   line-height: 200px;
}    

BgContainer {  
   perspective: 1px;  
   transform-style: preserve-3d;  
   height: 100vh;  
   overflow-x: hidden;  
   overflow-y: scroll;  
}  

FgContainer {  
   position: relative;  
   display: block;  
   background-color: white;  
   z-index: 1;  
} 
 
MainContent {  
   max-width: 750px;  
   margin: 0 auto;  
   padding: 75px 0;  
} 
 
p {  
   margin: 75px 0;  
} 
 
.Parallax {  
   display: flex;  
   flex: 1 0 auto;  
   position: relative;  
   z-index: -1;  
   height: 100vh;  
   justify-content: center;  
   align-items: center;  
   transform: translateZ(-1px) scale(2);  
   background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);  
   background-color: rgb(250,228, 216);
}

जैसा कि आपने अंतिम चरण में देखा है, जब आप फ़ाइल को सहेज रहे हैं, तो Save as टाइप करें, चुनें All Files। आवश्यकतानुसार अपनी फ़ाइल में नाम दर्ज करें और एक एक्सटेंशन जोड़ें.css यह करने के लिए।

कोड का विश्लेषण

आइए हम समझते हैं कि कोड का कौन सा भाग लंबन प्रभाव के लिए जिम्मेदार है। लंबन के लिए सबसे महत्वपूर्ण कार्य परिप्रेक्ष्य और परिवर्तन नियमों का उपयोग करके किया जाता है। को देखेंline 15उपरोक्त कोड स्निपेट में। परिप्रेक्ष्य हमारे लिए बनाया गया हैBgContainerप्रथम। यह नियम बदलने के लिए एक मंच शुरू करता है।

में Parallax कंटेनर लाइन 40 पर शुरू, transform नियम ४ the पर BgContainer div को अनुवाद (-1px) के उपयोग से पृष्ठभूमि में धकेलता है।

आप लंबन की गहराई को संशोधित करने के लिए अनुवाद और पैमाने के मापदंडों के मूल्यों को संशोधित कर सकते हैं।

जब आप HTML फ़ाइल खोलते हैं, तो लंबन प्रभाव नीचे दिखाए गए अनुसार दिखाई देगा -

Note - बाकी ट्यूटोरियल के लिए, यह माना जाएगा कि पाठक उपरोक्त विधि में प्रदान की गई फ़ोल्डर संरचना के अनुसार HTML और CSS फाइलें बनाने में सक्षम है।

एकाधिक पृष्ठभूमि विधि

इस विधि में, हमारे पास अलग-अलग छवियां होंगी जो उपयोगकर्ता पृष्ठ को नीचे स्क्रॉल करती हैं। पेंसिल के साथ एक छवि है, जो इस प्रभाव को स्पष्ट करने के लिए विभिन्न रंग संयोजनों में उपयोग की जाती है।

नीचे दिखाए गए अनुसार HTML पृष्ठ के लिए निम्न कोड देखें -

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   
   <body>  
      <h1>Multiple Background Example</h1>  
      <div class = "parallax">  
         <div class = "bg__First">First</div>  
         <div class = "bg__Second">Second</div>  
         <div class = "bg__Third">Third</div>  
         <div class = "bg__Fourth">Fourth</div>  
      </div>  
   </body>
   
</html>

पिछले उदाहरण के समान, हम उपयोग करेंगे styles.cssइस HTML फ़ाइल के समान स्थान पर संग्रहीत। हमारे पास पहले, दूसरे, तीसरे और चौथे नाम के तीन अलग-अलग विभाग हैं।

लंबन स्क्रॉलिंग के लिए CSS कोड नीचे दिया गया है -

body, html {
   height : 100%;  
   font-family : sans-serif;  
}  

.parallax [class*="bg__"] {  
   position : relative;  
   height : 50vh;  
   text-indent : -9999px;  
   background-attachment : fixed;  
   background-position   : top center;  
   background-size       : cover;  
}  
.parallax [class*="bg__"]:nth-child( 2n) {  
   box-shadow : inset 0 0 1em #111;
}  
.parallax .bg__First, .bg__Fourth {  
   height : 100vh;  
}  
.parallax .bg__First {  
   background-image : url("parallax0.png");  
}  
.parallax .bg__Second {  
   background-image : url("parallax1.png");  
}  
.parallax .bg__Third {  
   background-image : url("parallax2.png");    
}  
.parallax .bg__Fourth {  
   background-image : url("parallax1.png");   
}

यहां, हम लाइन 7 से लंबन प्रभाव बनाते हैं, यहां महत्वपूर्ण संपत्ति है background-attachment:fixed।

इस संपत्ति का उपयोग करते हुए, रंगीन पेंसिल के साथ पहली छवि हमेशा शीर्ष पर रहेगी। जैसे-जैसे आप नीचे स्क्रॉल करेंगे, लाइन 28 से वर्णित अलग-अलग चित्र दिखाई देने लगेंगे।

परिणामस्वरूप, आप लंबन प्रभाव देख पाएंगे जैसा कि नीचे दिए गए जीआईएफ में दिखाया गया है। निम्नलिखित छवि उस उदाहरण का स्क्रीनशॉट है जिसे हमने कई पृष्ठभूमि के लिए माना था।

शुद्ध सीएसएस लंबन

आइए पिछले दो तरीकों से ज्ञान को मिलाएं और एक उन्नत शुद्ध सीएसएस लंबन प्रभाव बनाएं।

अंतर वह होगा जिस तरह से हम व्यवस्था करते हैं image तत्व और z-transformसंपत्ति। संपत्ति का स्पष्टीकरण सीएसएस कोड के बाद प्रदान किया जाएगा।

नोटपैड से सामान्य विधि का उपयोग करके निम्न कोड के साथ HTML फ़ाइल बनाएं।

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   
   <body>  
      <div class = "wrapParallax">  
         <div class = "parallax_one">  
            <img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">  
         </div>  
         <div class = "parallax_two">  
            <h1>Pure CSS Parllax Advanced Level</h1>  
         </div>  
         <div class = "parallax_three">  
            <img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">  
         </div>  
      </div>  
   </body>
   
</html>

CSS फ़ाइल के लिए, कोड नीचे दिया गया है -

body, html {  
   padding: 0;  
   margin: 0;  
}  

h1 {  
   color: blue;  
   text-align: center;  
   padding: 20px;  
   text-shadow: 0px 0px 10px #fffff;  
}  

img {  
   width:100vw;  
   height:100vh;  
}  

.wrapParallax {
   perspective: 100px;  
   height: 100vh;  
   overflow-x: hidden;  
   overflow-y: auto;  
}  

.parallax {  
   position: absolute;  
   top: 0;  
   bottom: 0;  
   right: 0;  
   left: 0;  
}  

.parallax_one {  
   transform: translateZ(-100px) scale(2)  
}  

.parallax_two {  
   z-index: 10;  
   transform: translateZ(-200px) scale(3)  
}  

.parallax_three {  
   margin-top: 100vh;  
}

कोड का विश्लेषण

हमने पहले लेयर की स्थिति तय कर दी है line 26 का उपयोग करके position:absoluteसंपत्ति। स्थिति भी हार्ड-कोडित हैं 0।

में parallax_two, जो कि शीर्षक के साथ परत है, हमने आवेदन किया है z-index: 10शीर्षक के लिए एक अस्थायी प्रभाव प्रदान करने के लिए। परतparallax_three मार्जिन-शीर्ष संपत्ति प्रदान करके नीचे की ओर ले जाया जाता है।

इस प्रकार, हम अपने लंबन प्रभाव में जटिलता के स्तर को बढ़ा सकते हैं।

नीचे दिए गए चित्र में दिखाए अनुसार प्रभाव का निरीक्षण करें।