कैसे करें - लंबन स्क्रॉलिंग
CSS के साथ "लंबन" स्क्रॉलिंग प्रभाव बनाने का तरीका जानें।
लंबन
लंबन स्क्रॉलिंग एक वेब साइट प्रवृत्ति है जहां स्क्रॉल करते समय पृष्ठभूमि सामग्री (यानी एक छवि) अग्रभूमि सामग्री की तुलना में एक अलग गति से चलती है। लंबन स्क्रॉलिंग वाली और रहित वेबसाइट के बीच अंतर देखने के लिए नीचे दिए गए लिंक पर क्लिक करें।
नोट: लंबन स्क्रॉलिंग हमेशा मोबाइल उपकरणों/स्मार्ट फोन पर काम नहीं करती है। हालांकि, आप मोबाइल उपकरणों पर प्रभाव को बंद करने के लिए मीडिया प्रश्नों का उपयोग कर सकते हैं (इस पृष्ठ पर अंतिम उदाहरण देखें)।
लंबन स्क्रॉलिंग प्रभाव कैसे बनाएं
एक कंटेनर तत्व का उपयोग करें और एक विशिष्ट ऊंचाई वाले कंटेनर में पृष्ठभूमि छवि जोड़ें। फिर background-attachment: fixed
वास्तविक लंबन प्रभाव बनाने के लिए उपयोग करें। अन्य पृष्ठभूमि गुणों का उपयोग छवि को पूरी तरह से केंद्र और स्केल करने के लिए किया जाता है:
पिक्सल के साथ उदाहरण
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
ऊपर दिया गया उदाहरण छवि की ऊंचाई निर्धारित करने के लिए पिक्सेल का उपयोग करता है। यदि आप प्रतिशत का उपयोग करना चाहते हैं, उदाहरण के लिए 100%, छवि को पूरी स्क्रीन पर फिट करने के लिए, लंबन कंटेनर की ऊंचाई 100% पर सेट करें। नोट:height: 100%
आपको <html> और <body> दोनों पर भी आवेदन करना होगा :
प्रतिशत के साथ उदाहरण
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
कुछ मोबाइल उपकरणों में समस्या है background-attachment: fixed
। हालाँकि, आप मोबाइल उपकरणों के लिए लंबन प्रभाव को बंद करने के लिए मीडिया प्रश्नों का उपयोग कर सकते हैं:
उदाहरण
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}