Parallax Scrolling Tutorial: So einfach geht’s

24. November 2013 · Kategorien: CSS Stylesheets, Internet, JavaScript, Webentwicklung

Parallax Scrolling Tutorial

Parallax Scrolling ist ein Effekt, der sich zur Zeit einer großen Beliebtheit erfreut. Was auf den ersten Blick sehr kompliziert aussieht, ist aber ganz einfach umzusetzen! Dieses Parallax Scrolling Tutorial erklärt Dir, wie.

Was ist Parallax Scrolling?

Parallax Scrolling basiert auf dem Effekt der Bewegungsparallaxe: Während sich ein Objekt in eine bestimmte Richtung mit einer bestimmten Geschwindigkeit bewegt, bewegt sich gleichzeitig ein anderes Objekt in einer anderen Geschwindigkeit oder in eine andere Richtung.

Am besten verstehst Du das wohl, wenn Du es dir anschaust. Folgende Webseiten nutzt Parallax Scrolling und ist ein schönes Beispiel:
ala.ch

Wie Du siehst, verändert sich die Position bestimmte Grafiken, während du scrollst. Und das nicht, wie gewohnt, entsprechend der Scrollgeschwindigkeit nach oben, sondern in andere Richtungen und mit verschiedenen Geschwindigkeiten.

Parallax Scrolling Tutorial

Es gibt bereits zahlreiche JavaScript-Plugins, die Dir dabei helfen, Parallax Scrolling umzusetzen. Ich möchte Dir hier erklären, wie es im Grunde genommen funktioniert. Deswegen nutzt folgender Beispiel-Code bis auf das jQuery-Framework keine weiteren Hilfsmittel.

Schauen wir uns erstmal den HTML-Code an:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="js/jquery.js" ></script>
  <script type="text/javascript" src="js/parallax.js"></script>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  ...
  <div class="parallax elbe" data-direction="left" data-speed="0.7"></div>
  ...
</body>
</html>

Ganz wichtig ist, dass Du dem HTML-Dokument in der ersten Zeile einen Doctype zuweisen. Ich habe mich für den HTML5-Doctype entschieden. Würdest Du das vergessen, würde das JavaScript nicht richtig funktionieren, da die aktuelle Scrollposition nicht korrekt ermittelt werden kann.
Wie bereits erwähnt, binde ich jQuery ein. Und zusätzlich eine JavaScript-Datei parallax.js, die ich gleich aufzeigen werde.
Dreh- und Angelpunkt ist der Div-Container, der den Parallax-Scrolling-Effekt darstellen soll.
Dieser besitzt das data-direction-Attribut, mit dem wir angeben, dass sich der Hintergrund des Elements nach links bewegen soll, wenn der Benutzer nach unten scrollt. Für jeden Pixel, den der Benutzer scrollt, wird der Hintergrund um 0,7 Pixel nach links scrollen. Das gibt das data-speed-Attribut an.

Die CSS-Datei ist wenig aufregend:

.elbe
{
  background-image: url('../img/elbe.jpg');
  width: 900px;
  height: 300px;
}

Wir geben dem Div-Container ein Hintergrundbild, das breit genug ist, sodass es genügend weit nach links gescrollt werden kann. Zusätzlich setzen wir eine feste Größe.

Folgenden JavaScript-Code beinhaltet die Datei parallax.js:

$(function() {
  $(document).scroll(function() {  // ... immer, wenn auf der Seite gescrollt wird...
    var scrollPosTop = $(document).scrollTop(); // ...speichere die aktuelle obere Scrollposition
    var scrollPosBottom = $(document).scrollTop()+$(window).height(); // ... und die aktuelle unterste Scrollposition
    $('.parallax').each(function() { // Für jedes Element mit der CSS-Klasse "parallax"...
      var positions = $(this).position(); // Lies die Position aus, in der das Element liegt.
      var posTop = positions.top; // Speichere die Position, an der das Element oben beginnt.
      var posBottom = positions.top+$(this).height(); // speichere die Position, an der das Element unten abschließt.
      
      if(posTop <= scrollPosBottom && posBottom >= scrollPosTop) // Ist das Element im sichtbaren Bereich?
      {
        // In welche Richtung soll sich der Hintergrund des Elements beim Scrollen bewegen?
        var direction = 'left';
        var speed = 1;
        if($(this).data('direction'))
        {
          direction = $(this).data('direction');
        }
        
        // Mit welcher Geschwindigkeit soll sich der Hintergrund des Elements bewegen?
        if($(this).data('speed'))
        {
          speed = $(this).data('speed');
        }
        
        // An welcher Scrollposition befinden wir uns - relativ gesehen zum Element?
        var pos = scrollPosBottom-posTop;
        
        var x = 0;
        var y = 0;
        
        // Berechne an Hand der Richtung die neue Position des Backgrounds des Elements.
        if(direction == 'top')
        {
          y = speed*pos*-1;
        }
        else if(direction == 'right')
        {
          x = speed*pos;
        }
        else if(direction == 'bottom')
        {
          y = speed*pos;
        }
        else // left
        {
          x = speed*pos*-1;
        }
        
        // Setze die neue Hintergrundposition des Elements.
        $(this).css('background-position', x + 'px ' + y + 'px' );
      }
      
    });
  });
});

Was macht diese Datei?
Immer, wenn der Benutzer auf der Webseite scrollt, überprüft JavaScript, ob sich ein Element mit der CSS-Klasse parallax im sichtbaren Bereich befindet. Wenn ja, wird die Hintergrundposition des Elements entsprechend der aktuellen Scrollposition (var pos), der gewünschten Geschwindigkeit (data-speed) und der gewünschten Richtung (data-direction) angepasst.

Das ist im Grunde genommen auch schon alles, was Parallax Scrolling ausmacht. Man könnte das Script noch so erweitern, dass auch diagonale Richtungen möglich sind – also x und y gleichzeitig geändert werden.

Wenn Du noch Fragen hast, oder Dir etwas unklar ist, kann Du gerne mit einem Kommentar nachfragen.

Autor: | Kategorien: CSS Stylesheets, Internet, JavaScript, Webentwicklung

18 Kommentare zu Parallax Scrolling Tutorial: So einfach geht’s

  1. Luca G. sagt:

    Um die relative Scrollposition zu erhalten, muss anstatt:

    var pos = scrollPosBottom-posTop;

    folgendes benutzt werden:

    var pos = scrollPosTop-posTop;

    Außerdem ist zu beachten, dass standardmäßig der body eines HTML-Dokuments einen margin von ca. 8px hat.

    Mit freundlichen Grüßen
    Luca G.

  2. Thomas Kempel sagt:

    Vielen Dank für die super Beschreibung! Hut ab!

  3. Stephan sagt:

    Herzlichen Dank Christian für diese schöne Erklärung!

    Danke auch Luca für den Hinweis mit der Scrollposition.

    Ich habe aber ein kleines Problem:
    Und zwar funktioniert bei mir das ganze im IE11 und Chrome 34 – nicht aber in FF28!

    Ich kann machen was ich will – es funktioniert einfach NUR im FF nicht!

    Hast du vielleicht eine Idee woran das liegen könnte?

    LG, Stephan

  4. Stephan sagt:

    Hallo, ich bins nochmal ;)

    Habs herausgefunden: es liegt ganz einfach daran, dass FireFox kein “background-position-x/y” kennt sondern nur die einfache Bezeichnung “background-position” mit danach dem x und dann dem y Wert.

    Da ich nur den y- Wert ändern lasse hats dann bei mir ein “$(this).css({ ‘background-position’: ’0px ‘ + y + ‘px’ });” gemacht!

    LG

  5. […] bei Dr.Web Ein Tutorial zum Thema Eine Anleitung mit jQuery Begriffserklärung Bewegungsparallaxe Der Parallax Background […]

  6. MedienGaarage sagt:

    Super Beschreibung. Es funktioniert aber im Firefox leider nicht. Chrome, Opera, IE alles super, nur der Firefox mag nicht.

  7. Sascha sagt:

    Hallo,
    hab Dein Script mal testweise in zwei Bilder eingebaut und dabei 2 Probleme bekommen.
    Vielleicht weist Du rat.

    1. Der Firefox weigert sich die Position zu berechnen.

    2. Im Chrome beginnt er mit einem negativen Wert und zeigt mir daher den unteren Teil des Bildes oben zuerst im Div.

    direction ist “top”

    Weist Du Rat ?
    Danke vorab für Deine Mühe und das Script :-)

  8. Bastian sagt:

    Hallo,
    ist es auch möglich, dass das Script automatisch alle Bilder der Website erkennt und den Parallax Effekt anwendet?
    Ich würde nämlich genau das in ein WP Themen einbinden und mir das leben somit einfacher machen, indem ich alle Bilder über den WP Editor in die Website einbinde!
    MFG
    Basti

  9. Jan sagt:

    Damit es in FF funktioniert muss folgendes geändert werden:

    Zeile 30:

    statt:

    var x,y;

    neu:

    var x = 0;
    var y = 0;

    ab Zeile 51:

    statt:

    $(this).css(‘background-position-x’, x);
    $(this).css(‘background-position-y’, y);

    neu:

    $(this).css(‘background-position’, x + ‘px ‘ + y + ‘px’ );

  10. Jan sagt:

    Solle so auch in den restlichen Browsern funktionieren!

  11. Markus sagt:

    Hi, danke für diese tolle Erklärung, ist ja gar kein großer Aufwand. ;) …wenn man weiß wie… :)))
    Doch leider funktioniert es auch bei Codeänderung nicht im FF 29.0.1 :(
    Gibts da noch Möglichkeiten dafür???
    Und, mir ist aufgefallen, das das Bild beim ersten Scroll gleich ziemlich weit von rechts nach links springt, und beim zurückscrollen, scrollt es leider nicht an den Anfangspunkt zurück…
    Wo kann ich da was im Code verändern? Ich hab nichts gefunden….
    Vielen Dank für die Mühe!
    Grüße

  12. Andreas sagt:

    hello

    is there a way to slide the content with the background image?
    i try to do this:
    when the page load the sliding div show a image with a text.
    then the user scroll down, the div iss scrolling up with a speed of 2. when the div iss on the top it should show another text with a button.

    thanks for help
    Andreas

  13. Christian Kilb sagt:

    Danke, Jan! Habe den Beitrag entsprechend korrigiert.

  14. Ben sagt:

    Hallo und vielen Dank für diesen Beitrag.

    Ich habe leider das Problem, dass das data-direction und data-speed Attribut, welches ich direkt in das html – DIV Tag schreibe, scheinbar gar keine Funktion haben.

    Egal welche Werte ich eintrage, oder ob ich es raus lasse, das Bild wird immer nach links gescrollt und auch immer mit der gleichen Geschwindigkeit.

    Eine Änderung kann ich lediglich mit einer Änderung direkt in der JS – Datei erzielen.

    Ist das ein Verständnisfehler von mir, oder ist da irgendwo ein Fehler drin ?

    Würde mich über einen kleinen Hinweis freuen.

    Viele Grüße aus Dresden.
    Ben

    • Petra sagt:

      Danke, der Einbau hat reibungslos funktioniert. Ich habe den Effekt im Seitenkopf eingebaut und es sieht grundsätzlich auch sehr cool aus.

      Allerdings habe ich das Problem, das beim Beginn des Scrollens das Hintergrundbild “springt”, d. h. es ändert ganz plötzlich seine Position, um dann geschmeidig weiter zu gleiten.

      Ich weiß leider nicht woran das liegen könnte, bzw. an welcher Stellschraube ich drehen sollte.

      Für einen kleinen Tipp bedanke ich mich schon jetzt.

      Gruß
      Petra

  15. Alexander sagt:

    Danke sehr! Ausgezeichnet und ausführlich erklärt, sodass es auch für den Laien verständlich ist!

    Kommentar von Luca G. hat ebenfalls geholfen, danke!

  16. Colin sagt:

    Danke für das hilfreiche Tutorial!

    Eine kleine Frage hätte ich aber noch: “Man könnte das Script noch so erweitern, dass auch diagonale Richtungen möglich sind – also x und y gleichzeitig geändert werden.” Wie genau würde das dann aussehen? :-)

    Vielen Dank schonmal!

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *