मैं शुद्ध सीएसएस का उपयोग करके लंबन प्रभाव बनाने की कोशिश कर रहा हूं जिसमें पहले फ्रेम पर वीडियो पृष्ठभूमि भी है। प्रभाव फ़ायरफ़ॉक्स और आईई 9 + में ठीक काम करता है लेकिन क्रोम के पास "पृष्ठभूमि-संलग्नक: निश्चित" वाले सभी फ्रेम पर एक असर पड़ता है।वीडियो पृष्ठभूमि के साथ शुद्ध सीएसएस लंबन प्रभाव
मैंने एक विषम HTML लेआउट और सीएसएस क्लिपिंग का उपयोग करने से पहले यहां एक उत्तर खोजने का प्रबंधन किया लेकिन मुझे अब यह नहीं लगता है। उस कोड के साथ मुद्दा यह था कि मैं फ्रेम को न्यूनतम ऊंचाई पर सेट करने में असमर्थ था और सामग्री को छोटे व्यूपोर्ट्स पर आसानी से रीफ्लो करने की अनुमति देता था।
यहां पर बहुत से समान प्रश्न हैं लेकिन उनमें से कोई भी वास्तव में उत्तर नहीं दिया जाता है या वे अब एक पुरानी बग का संदर्भ दे रहे हैं जो अब तय किया जा रहा है। अगर मैं वीडियो को हटा देता हूं तो पृष्ठभूमि-अनुलग्नक संपत्ति अपेक्षित व्यवहार करती है। शायद इन मुद्दों से संबंधित हैं?
उदाहरण: http://codepen.io/cluke009/pen/cdHJu
एचटीएमएल
<div id="slide0" class="slide"></div>
<div id="slide1" class="slide"></div>
<div id="slide2" class="slide">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>....
</div>
<div id="slide3" class="slide">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>....
</div>
<div id="slide4" class="slide"></div>
<div id="slide5" class="slide"></div>
सीएसएस
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
p{
margin: 0;
padding: 10px 5%;
}
video {
z-index: -9999;
position: fixed;
right: 0;
bottom: 0;
width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
}
.slide {
box-sizing: border-box;
height: auto;
min-height: 100%;
min-width: 100%;
background-size: cover;
box-shadow: inset 0 10px 10px rgba(0,0,0,.3);
}
.slide:nth-child(even) {
background-attachment: fixed;
}
#slide1{
background-image:url(http://www.placekitten.com/1000/900);
}
#slide2{
background-image:url(http://www.placekitten.com/600/400);
}
#slide3{
background-image:url(http://www.placekitten.com/1000/1000);
}
#slide4{
background-image:url(http://www.placekitten.com/1000/800);
}
आप एक 'फाड़ प्रभाव' क्या मतलब है? –
हमें यह जानने की जरूरत है कि आप प्रभाव को फाड़ कर क्या समझते हैं। यदि आपका मतलब है कि स्क्रॉल नरम की बजाय छोटे चरणों की तरह है, तो यह प्रोग्राम के कार्यान्वयन के कारण ही है। आप स्क्रॉल का पता लगाने वाली एक स्क्रिप्ट बना सकते हैं, इसे रोकता है और फिर इसे आसानी से और बाहर प्रभाव से एनिमेट करता है। – Vandervals
क्रोम पर खड़ा एकमात्र चीज वीडियो वास्तव में पिक्सलेटेड हो रही है, क्या यह है कि आप "फाड़ने" से क्या मतलब रखते हैं? –