Beiträge von AnanasXpress

Prinzipiell schon, aber sobald das div vorbei ist, soll ein neues bild von unten drüber scrollen und nicht mehr kleben bleiben aber auch nicht sofort verschwinden.
Also eher ein background-attachment: scroll, sobald es oben ankommt fixed, wenn es vorbei ist wieder auf scroll.

Hallo,

ich bin frisch registriert und hoffe hier an der richtigen Stelle meine Frage zu stellen.

Ich möchte auf einer Website drei Bereiche untereinander haben.
Im ersten ist ein Bild im Hintergrund, welches nach oben weggeht beim scrollen, also ganz normal.

Der zweite Bereich soll nun hochscrollen, sobald das Bild den oberen Bildrand erreicht, soll es von background-attachment: auf fixed gesetzt werden.

Bisher konnte ich leider noch keine Funktion finden, die das kann.

Vielleicht würde mir auch am Anfang eine Funktion helfen die erkennt, wann das div den oberen Bildrand berührt.

.start{
    background-image: url(Titel.jpg);
    background-size: cover;
    width: 100%;
    height: 100vh;
}
.zwei{
    background-image: url("Seite2.jpg");
    background-size: cover;
    width: 100%;
    height: 100vh;
}
.drei{
    background-image: url("Seite2farbe.jpg");
    background-size: cover;
    width: 100%;
    height: 100vh;
}


<div class="start">Text</div>
<div class="zwei">Text</div>
<div class="drei">Text</div>

Das ist so das Grundgerüst von den interessanten Stellen.

.start ist soweit von der Sache ja unberührt. Sobald allerdings .zwei komplett reingescrollt ist, soll es kleben bleiben im Hintergrund, im Vordergrund ist Text.

Ist der Bereich vorbei soll es ganz normal wieder weiterscrollen.

Hoffentlich hat jemand eine Idee.

Mit besten Grüßen