Parallax Scrolling wie im Twitter-Header

[Ratchet_Clank]

Wenn ich mein Twitter Profil aufrufe, ist oben ja so ein breiter Header mit Bild. Scrollt man runter, bewegt sich das Bild ein wenig mit, so eine Art parallax Scrolling. Wie kann ich das selbe für den Header auf meiner eigenen Seite realisieren?

Beispiel auf Twitter: https://twitter.com/TimOfLegend

 

[Sempervivum]

Habe mal versucht, das Verhalten der Twitter-Seite nachzubilden:
http://jsfiddle.net/ebsyfwh3/2/
Hoffe, das ist das, was Du dir vorgestellt hast.

 

[Ratchet_Clank]

Hm... ne, leider nicht. Das Bild soll sich ja beim scrollen auch ein wenig mit verschieben - parallax Scrollig halt ^^
Bei deinem Beispiel scrollt es einfach nach oben weg. Ich denke ein wichtiges Kreterium ist, dass das Bild größer ist als zB das div, in dem es angezeigt wird. Sonst gibt es ja nichts zum "parallaxen" Scrollen ;)

 

[Sempervivum]

Hm, ich benutze Firefox und habe es jetzt auch mit Chrome probiert. Etwas parallax-artiges kann ich bei dem Verhalten nicht feststellen. Das Bild verschiebt sich zunächst synchron mit dem Content nach oben und bleibt dann stehen, so dass der unterste Bereich sichtbar bleibt. Habe es auch mit IE probiert, aber dort lädt die Seite und lädt und lädt und wird nicht fertig.

 

[Ratchet_Clank]

Ich benutze auch Firefox und bei mir ist es klar sichtbar. Mir ist gerade eingefallen, dass es sich aber auch um eine optische Täuschung handeln könnte. Was wenn nicht das Bild scrollt, sondern der untere Kontent zunächst schneller noch oben kommt, bis das Bild verschwunden ist? Na ja, egal, ich würde so etwas gerne bei mir einbauen, egal wie es funktioniert.

 

[Sempervivum]

Habe es nochmal geringfügig verändert und ein kleineres Bild genommen, damit der Effekt besser sichtbar ist:
http://jsfiddle.net/ebsyfwh3/4/
Meinst Du es so?

 

[Ratchet_Clank]

Sieht nicht so aus wie bei Twitter, wobei der Effekt an sich glaube ich gar nicht so falsch ist.

Mal eine andere Erklärung: Wenn ich scrolle, soll sich das Bild im Header mit einem Faktor von zB 1,2 relativ zur Scrollposition bewegen.
Das Bild soll also ein wenig schneller noch oben scrollen, als der restliche Kontent.

 

[Sempervivum]

Dann muss man nur den Faktor ändern:
http://jsfiddle.net/ebsyfwh3/6/
Ich habe mal 1.5 genommen, weil bei 1.2 der Effekt kaum sichtbar war.

 

[thecain]

hö... habt ihr mal in den quelltext geschaut? Da wird einfach ein translate3d auf das header img gesetzt...

Wobei ich das gestottere vom Bild jetzt nicht unbedingt erstrebenswert finde und auch nicht wirklich nach parallax aussieht

 

[Ratchet_Clank]

Oh, stimmt, nun ist es gut sichtbar. Ich denke, ich werde es so einbauen. Reicht vollkommen aus :)
Dankeschön!

@thecain Also bei mir stottert da gar nichts. Zwar habe ich auch in den Quellcode geschaut, aber mein Problem war, dass ich nicht recht wusste, wonach ich überhaupt suchen soll. Was ist denn Translate3D? Javascript oder wie oder was? (Kenne so etwas aber aus anderen Sprachen)

EDIT: Translate3D wäre in meinem Fall sogar richtiger, da ich nicht das Bild/div selber verschieben will, sondern ja nur den Inhalt, also den Bildausschnitt, beim Scrollen verändern möchte.