Czy mogę sprawić wrażenie, że tekst jest poprawiony podczas przewijania ustalonych obrazów tła?

Question

Here is my fiddle

Próbuję utworzyć stronę internetową, na której użytkownik może przewijać wielu obrazów pełnoekranowych, które overlayed elementy HTML, które wydają się być stałe (nie przejść przewijania).

W moim skrzypce widać, że aktualnie mam ustawiony tekst absolutny i poruszają się względem rodzica. Zamiast tego chciałbym umieścić tekst w miejscu, w którym chciałbym, aby pojawiał się nad każdym obrazem tła, a następnie, gdy użytkownik przewinie tekst w dół, tekst pozostanie niezmieniony, a następnie zostanie zakryty/odsłonięty w następnej sekcji (w zależności od kierunku).

Próbowałem użyć wartości position: fixed i z-index, ale zawsze mogłem zobaczyć stałe elementy, gdy chciałbym, aby stałe elementy były widoczne tylko z własnym slajdem.

Dodawanie tekstu do plików obrazów nie spełnia moich wymagań, ponieważ ostatecznie chciałbym, aby dynamiczne elementy tekstowe i wideo były w tych stałych elementach. Wielkie dzięki za twoje spostrzeżenia.

Answer 1

Nie można tego zrobić za pomocą czystego css. Zobacz ten fragment.

$(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>