CSS के जरिए

दृश्यसारण रोलिंग

दृश्यसारण रोलिंग एक वेबसाइट डिजाइन ट्रेंड है, जहां पृष्ठभूमि सामग्री (जैसे चित्र) रोलिंग के दौरान गति और पृष्ठभूमि सामग्री अलग-अलग है। नीचे दिए लिंक पर क्लिक करके, दृश्यसारण रोलिंग और बिना दृश्यसारण रोलिंग वेबसाइटों के बीच की अंतराल को देखें।

विभिन्न गति से रोलिंग अस्तर के साथ का प्रदर्शन

विभिन्न गति से रोलिंग अस्तर के बिना का प्रदर्शन

ध्यान दें:विभिन्न गति से रोलिंग अस्तर मोबाइल डिवाइस/स्मार्टफोन पर हमेशा नहीं काम करता। लेकिन, आप मोबाइल डिवाइस पर इस अस्तर को बंद कर सकते हैं (इस पृष्ठ के अंतिम उदाहरण को देखें)。

किस तरह से विभिन्न गति से रोलिंग अस्तर का निर्माण करें

एक कंटेनर एलीमेंट का इस्तेमाल करके और उस कंटेनर को एक विशिष्ट ऊंचाई वाली पृष्ठभूमि छवि जोड़ें। फिर, background-attachment: fixed; वास्तविक विभिन्न गति से रोलिंग अस्तर का निर्माण करें। अन्य पृष्ठभूमि गुण इमेज को केंद्रित और सही तरीके से छोटा करने के लिए इस्तेमाल किए जाते हैं:

पिक्सल में एक इनस्टांस

<style>
.parallax {
  /* इस्तेमाल की गई छवि */
  background-image: url("img_parallax.jpg");
  /* विशिष्ट ऊंचाई सेट करें */
  min-height: 500px;
  /* विभिन्न गति से रोलिंग अस्तर का निर्माण करें */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* कंटेनर एलीमेंट */
<div class="parallax"></div>

स्वयं प्रयोग करें

उपरोक्त उदाहरण में इमेज की ऊंचाई पिक्सल में सेट की गई है। अगर आप पूरे स्क्रीन के लिए इमेज को समायोजित करना चाहते हैं, जैसे 100%，तो पैरालॉक्सी कंटेनर की ऊंचाई 100% के रूप में सेट करें। ध्यान दें: आपको अनिवार्य रूप से height: 100%; एक्सेस देने के लिए <html> और <body> पर लगाया जाता है:

प्रतिशत में एक इनस्टांस

body, html {
  height: 100%;
}
.parallax {
  /* इस्तेमाल की गई छवि */
  background-image: url("img_parallax.jpg");
  /* पूर्ण ऊंचाई */
  height: 100%;
  /* विभिन्न गति से रोलिंग अस्तर का निर्माण करें */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

स्वयं प्रयोग करें

कुछ मोबाइल डिवाइस जब इस्तेमाल करते हैं background-attachment: fixed; के दौरान प्रश्न उठ सकते हैं। लेकिन, आप मीडिया क्वेरी के द्वारा मोबाइल डिवाइस पर विभिन्न गति से रोलिंग अस्तर बंद कर सकते हैं:

उदाहरण

/* सभी पैड और मोबाइल फोनों के लिए विभिन्न गति से रोलिंग अस्तर बंद करें। आवश्यकता पड़े तो पिक्सल में बढ़ाएं/कम करें */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

स्वयं प्रयोग करें

इस कोड में, जब स्क्रीन चौड़ाई 1366 पिक्सल से कम या समान है, तो विभिन्न गति से रोलिंग अस्तर बंद कर दिया जाता है, यह अधिकांश पैड और मोबाइल फोनों के लिए उपयुक्त है। यह बदलने के द्वारा होता है .parallax की वर्ग background-attachment गुण से fixed 到 scroll 来实现的。这样，背景图像就会随着页面的其余部分一起滚动，而不是固定在视口中。