Seite mit verschiedenen Hintergründen designen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ansatz
antworten
begriff
beispiel
bewegen
bild
design
effekt
falle
glauben
http
meinung
navigation
umsetzung
url
wissen
-
Hi!
Ich stolpere in letzter Zeit öfter über Seiten mit mehreren, feststehenden Hintergründen.
Hier sind mal Beispiele dafür:
http://www.heroesofnewerth.com/splash/
https://www.spotify.com/de/
Offenbar sind da mehrere Hintergrundbilder untereinander, im Falle Spotifys bewegen sie sich beim "nachuntenscrollen" langsamer, bei HoN gar nicht.
Wie ist das mit CSS realisierbar?!
Habe bisher nicht einmal einen Ansatz gefunden.
MfG. Simon D. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich glaube mit reinem CSS ist dies nicht möglich. In den Beispielen wurde Javascript bzw. jquery verwendet.
-
Wenn sich verschiedene Bildschirmelemente beim Scrollen unterschiedlich schnell bewegen, dann spricht man häufig von einem sogenannten Parallax-Effekt.
Z.B. hier
http://deutsche.droppages.com/
oben in der Navigation
Eine Umsetzung nur mit CSS(3) ist auch meiner Meinung nach nur schwer möglich auch wenn es hier
http://www.romancortes.com/blog/css-3d-meninas/
ein Beispiel dazu gibt.
Wenn man jetzt also suchmaschint mit parallax javascript stößt man recht schnell auf jQuery Plugins.
Der Effekt auf der Heroes-Website basiert meiner Meinung nach auf diesem Grundsystem
https://gist.github.com/amyvanwetten/4318371 -
Hallo!
Sehr großen Dank für die Antworten, doch auf den "Parallax"-Effekt kam es mir ehrlich gesagt gar nicht an: Ich wollte nur verdeutlichen um was für Hintergründe es geht.
Ich wollte wissen, wie man es schafft - auch mit Javascript - dass halt diese Bilder sozusagen untereinander angezeigt werden und nicht mitscrollen, wenn der Hauptinhalt auf einer Ebene darüber gescrollt wird.
MfG. Simon D. -
simon-d schrieb:
Ich wollte wissen, wie man es schafft - auch mit Javascript - dass halt diese Bilder sozusagen untereinander angezeigt werden und nicht mitscrollen, wenn der Hauptinhalt auf einer Ebene darüber gescrollt wird.
Genau dafür wird sehr häufig der Begriff parallax-Effekt verwendet. Ob der mit Mausbewegungen oder mit Scrollen aktiviert wird, ist sekundär. Wie ich schon geschrieben habe, muss man nun also nur mit den richtigen Begriffen eine SuMa füttern und erhält z.B.
http://webmagazin.de/design/5-kostenlose-Parallax-Scrolling-Plugins-fuer-Webdesigner-167402
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage