Leslie: Hintergrund scrollt langsamer

Hallo zusammen!

Ich möchte auf meiner Seite den Hintergrund langsamer scrollen lassen als den Inhalt der Seite.

Beispiele:
http://www.tmdesign.sk/
http://www.yurbuds.com/

So wie ich das sehe, wird mit javascript die Scrollgeschwindigkeit des Hintergrundes verlangsamt!?

Kann mir jemand dabei weiterhelfen, wie man sowas macht?

Vielen Dank!

Leslie

  1. So wie ich das sehe, wird mit javascript die Scrollgeschwindigkeit des Hintergrundes verlangsamt!?

    Nein - an der Scrollgeschwindigkeit änder sich nichts.

    Aufgrund der Scrollposition wird das Hintergrundbild/Element anders positioniert.

    Kann mir jemand dabei weiterhelfen, wie man sowas macht?

    Mit jQuery ist das vergleichweise einfach.

    mit .scroll() überwachst du, ob gescrollt wird - mit .scrollTop() wertest du die positon bzw. das offset von oben aus.

    Aus diesem offset berechnest du dann die position für dein Bild und setzt es entsprechend, indem du mittels .css() die eigenschaften entsprechend manipulierst.

    1. Hi there,

      Kann mir jemand dabei weiterhelfen, wie man sowas macht?

      Mit jQuery ist das vergleichweise einfach.

      Es muss aber noch einfacher sein, es geht nämlich (zumindest auf der zweiten genannten Seite) auch ohne Javascript. Naja, egal, wer so hässliche und unbedienbare Seiten produziert ist Kummer ohnehin gewöhnt...

      1. Hi,

        Mit jQuery ist das vergleichweise einfach.

        Es muss aber noch einfacher sein, es geht nämlich (zumindest auf der zweiten genannten Seite) auch ohne Javascript.

        Kann ich nicht bestätigen - wenn ich im Opera JavaScript für die Seite deaktiviere, dann ist auch der Effekt weg.
        In welchem Browser hast du das getestet?

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        1. Hi there,

          Kann ich nicht bestätigen - wenn ich im Opera JavaScript für die Seite deaktiviere, dann ist auch der Effekt weg.
          In welchem Browser hast du das getestet?

          mit dem FF 5.irgendwas und einem uralten Flock (Gecko)...

  2. So wie ich das sehe, wird mit javascript die Scrollgeschwindigkeit des Hintergrundes verlangsamt!?

    Es wird die Hintergrundposition (background-position) relativ zur gescrollten Höhe verändert, vermittelt über ein Faktor (der nicht gleich 1 ist). Der Hintergrund wird also beim Herunterscrollen nach oben verschoben.

    Kann mir jemand dabei weiterhelfen, wie man sowas macht?

    Schau in den dort eingebundenen JavaScript-Quellcode. Dort wirst du ein jQuery-Plugin finden, welches diesem hier sehr ähnelt:

    http://www.franckmaurin.com/the-parallax-effects-with-jquery/

    Derart findest du einige, wenn du nach »parallax background« oder »jquery parallax background« suchst.

    Mathias

      1. Super! Danke für die Antwort, Mathias. Ich versuch mich mal dran ;)

        Gruß Leslie