क्या मैं निश्चित पृष्ठभूमि छवियों पर स्क्रॉल करते समय टेक्स्ट को ठीक करने के लिए प्रकट कर सकता हूं?

Question

Here is my fiddle

मैं (स्क्रॉल पर कदम नहीं) एक वेब पेज जहां उपयोगकर्ता एकाधिक छवियों को पूरे स्क्रीन कि तय होना दिखाई देते हैं कि HTML तत्वों ओवरले है स्क्रॉल कर सकते हैं बनाने के लिए कोशिश कर रहा हूँ।

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

मैंने position: fixed और जेड-इंडेक्स मानों का उपयोग करने का प्रयास किया लेकिन मैं निश्चित तत्वों को हमेशा देख सकता था जब मैं निश्चित तत्वों को केवल अपनी स्लाइड के साथ दिखाना चाहता हूं।

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

Answer 1

आप शुद्ध सीएसएस का उपयोग करके ऐसा नहीं कर सकते हैं। कृपया इस स्निपेट को देखें।

$(window).scroll(function() { 
 
    $("section .cover-text").each(function() { 
 
    var marginTop = $(window).scrollTop() - $(this).parent().position().top; 
 
    $(this).css({ 
 
     'margin-top': marginTop 
 
    }); 
 
    }); 
 
});

#slide-1, 
 
#slide-2, 
 
#slide-3 { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.cover-1, 
 
.cover-2, 
 
.cover-3 { 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    height: 100vh; 
 
} 
 

 
.cover-1 { 
 
    background-image: url('http://placekitten.com/800/350'); 
 
    z-index: 3000; 
 
} 
 

 
.cover-2 { 
 
    background-image: url('http://placekitten.com/g/800/350'); 
 
} 
 

 
.cover-3 { 
 
    background-image: url('http://placekitten.com/800/355'); 
 
} 
 

 
.cover-text { 
 
    font-size: 25px; 
 
    color: #FFFFFF; 
 
    text-shadow: 0 0 30px #000000; 
 
    position: absolute; 
 
    left: 20%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%); 
 
    -moz-transform: translate(-50%); 
 
    -ms-transform: translate(-50%); 
 
    transform: translate(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="slide-1"> 
 
    <div class="cover-1"></div> 
 
    <div class="cover-text">Title 1</div> 
 
</section> 
 
<section id="slide-2"> 
 
    <div class="cover-2"></div> 
 
    <div class="cover-text">Title 2</div> 
 
</section> 
 
<section id="slide-3"> 
 
    <div class="cover-3"></div> 
 
    <div class="cover-text">Title 3</div> 
 
</section>