Website (HTML und CSS) Mehrere Bilder beim Scrollen sichtbar machen...
Hallo zusammen,
ich möchte gerne mit HTML und CSS eine Website erstellen. Ich habe auch schon das Grundgerüst. Jetzt möchte ich beim Scrollen Bilder sichtbar werden lassen. Das ist schwer auszudrücken...deswegen hier eine Beispielseite: http://nextcargame.com/
wenn man runterscrollt wird ein Bild sichtbar das scheinbar im Hintergrund ist und wird wieder vom Vordergrund verdeckt. Weiter unten kommt dasselbe mit einem anderen Bild. Weiß jemand zufällig wie man so etwas macht? Vielleicht kann mir ja jemand helfen;)
LG Calamann
4 Antworten
Dieser Effekt nennt sich Parallax und kann entweder mit purem CSS3 oder mit Hilfe von JS (jQuery) umgesetzt werden. Wenn du Parallax jQuery als Suchbegriff verwendest, findest du haufenweise Beispiele. Ich habe dir exemplarisch eines auf jQuery Basis heraus gesucht.
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
LG medmonk
Vielen Dank :) Das wars was ich gesucht habe. Ich habe mir schon vorher den entsprechenden Quellcode von der Seite kopiert und es hat auch funktioniert. Nur dieser war sehr unsauber und es gab viele Elemente die ich wahrscheinlich gar nicht gebraucht hätte. Jetzt habe ich endlich etwas, wonach ich suchen kann:D Danke ;)
Das ist nur mit CSS gemacht.
Such mal im Quelltext hier nach
http://nextcargame.com/wp-content/uploads/2013/08/1_full1.jpg
und background-4b.jpg
Das sind einfach normale Images, keine Background Images glaube ich
wie bekommt man das denn hin, dass das bild fixiert ist und vom Vordergrund vedeckt bzw aufgedeckt wird? :)
Sieht für mich nach JS aus.