Hintergrund Bildwechsel

[Andre267]

Schönen guten Abend,

ich bin gerade auf eine Seite gestoßen, welche den Hintergrund je nach position der Ansicht wechselt bzw. (verrutscht).
Kann mir wer sagen, wie das gemacht wurde?
http://www.studio71.com/

Ich bin mir nicht ganz sicher, ob das mit html5, css3 oder jQuery möglich ist.

 

[Sempervivum]

So etwas kann ich auf dieser Seite nicht erkennen. Ich sehe nur zwei Slider, die Bilder wechseln. Meinst Du die?

 

[Andre267]

http://www.7tv.de/
Hier ist das mit den Feilen gemacht das gibt es aber auch noch irgendwo das man nur scrollen muss und dann entsteht dieser Effekt das, dass Hintergrund Bild von einem Content überlagert wird und unten ein weiteres Bild beim weiter scrollen auftaucht.

 

[SpiceLab]

Schau mal hier: Create a background changing scroll effect

Das Tutorial wurde durch http://www.imagineourymca.ca/ inspiriert.

 

[Andre267]

Das ist nicht ganz der Effekt den ich meine.
Auf der Seite die ich als Referenz gezeigt habe sieht man das nichts in der Form ausgeblendet wird sondern eher überlagert durch den Content.

 

[SpiceLab]

Das ist nicht ganz der Effekt den ich meine.
Auf der Seite die ich als Referenz gezeigt habe sieht man das nichts in der Form ausgeblendet wird sondern eher überlagert durch den Content.

Das Grundprinzip ist aber technisch das gleiche; beim Erreichen eines Ankers (Sprungmarke) oder einer vordefinierten Scrollposition wechselt der Hintergrund.

In Kenntnis der relevanten Suchbegriffe darfst du dich auch gerne nun selbstständig nach einer Anleitung/Vorlage mit dem deckungsgleichen Effekt umschauen: background changing scroll effect

Nachtrag:
Ich hatte heute Morgen den Quellcode der Seiten nicht näher unter die Lupe genommen

Im ersten Beispiel verhält es sich so, dass die "Kapitel" nur unterschiedliche Hintergrundfarben besitzen.

Wo ein Bild auftaucht, wurde es als <img>-Element mit Transparenz unter den Text gelegt, und die weiteren Slider-Blöcke überdecken größtenteils einfach die definierte "Kapitelhintergrundfarbe".

Wie auch im ersten Beispiel, kommt im zweiten Beispiel eine scroll-Funktion zum Einsatz, um die Anker sanfter anzusteuern, anstatt sprunghaft mit einem herkömmlichen Anker-Verweis - siehe hierzu z.B.
Smooth Scrolling To Internal Links With jQuery