Eine einfache Parallax-Scrolling-Technik

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Das Parallax-Scrollen ist eine interessante Technik, bei der die Hintergrundbilder beim Scrollen langsamer übersetzt werden als der Inhalt im Vordergrund, wodurch die Illusion der 3D-Tiefe erzeugt wird. Als ich vorhatte, meine persönliche Website neu zu gestalten, war mein erstes Ziel, den kürzesten und einfachsten Code zu schreiben, um ein Maximum an Größe zu erreichen! Ich zeig dir wie ich es gemacht habe.

Wenn Sie nach einem schnellen Einstieg in eine grundlegende Vorlage für Ihr Thema suchen, ist die Suche nach einem einfachen Parallax-Thema möglicherweise eine gute Option. Oder stöbern Sie in unseren One Page Templates. Sie können auch Dienstanbieter in Envato Studio finden, die für Sie Parallax-Scrolling-Sites erstellen.

In diesem Tutorial werde ich Ihnen die einfachste Parallax-Scrolling-Methode beibringen, die Sie jemals kennengelernt haben, also lassen Sie uns rein!

Schritt 1: Der Markup

Bei dieser Technik wird die Geschwindigkeit des Hintergrundbildes gesteuert. Beginnen wir mit dem HTML-Markup und erstellen zwei Abschnitte mit den erforderlichen Attributen: "data-type" und "data-speed". Machen Sie sich keine Sorgen; Ich erkläre das später.

                <section id="home" data-type="background" data-speed="10">                            
                </section>   
                    
                <section id="about" data-type="background" data-speed="10">
                </section>

Ich verwende das <section>-Tag mit den Attributen data-type& data-speed, die in HTML5 eingeführt wurden. Dadurch wird das HTML-Markup sauberer und lesbarer.

Gemäß der Spezifikation für benutzerdefinierte Datenattribute wird jedes Attribut, das mit data- beginnt, als Speicherbereich für private Daten behandelt. Darüber hinaus wirkt sich dies nicht auf das Layout oder die Präsentation aus.

Da wir nur die Geschwindigkeit der Hintergrundbilder steuern müssen, verwenden wir als Schlüsselattribute data-type= "background" und data-speed="10", um die erforderlichen Parameter festzulegen.

Ich weiß, was Sie denken: Sie machen sich Sorgen um IE. Hab niemals Angst; Ich habe auch einen Workaround dafür! Wir werden es kurz besprechen.

Als Nächstes fügen wir den Inhalt innerhalb des <article>-Tags in jedem <section> hinzu.

                <section id="home" data-type="background" data-speed="10" class="pages">     
                         <article>I am absolute positioned</article>
                    </section>   
                    
                <section id="about" data-type="background" data-speed="10" class="pages">
                         <article>Simple Parallax Scroll</article>
                </section>

Was wir hier versuchen, ist, den Hintergrund deslangsamer als den Inhalt zu scrollen, d. h. <article>. Das wird uns helfen, eine Parallaxe-Illusion zu schaffen. Bevor wir zur jQuery-Magie übergehen, fügen wir für jeden <section> die Hintergrundbilder in unserem CSS hinzu.

                                
                #home { 
                background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
                }
                
                #about { 
                background: url(about-bg.jpg) 50% 0 no-repeat min-height: 1000px;  
                }

Beim Hinzufügen von Hintergründen für beide Abschnitte sollte es so aussehen:

Lassen Sie uns noch mehr CSS hinzufügen, um die Seite zu gestalten und aufpeppen!

                #home { 
                  background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
                  height: 1000px; 
                  margin: 0 auto; 
                  width: 100%; 
                  max-width: 1920px; 
                  position: relative; 
                }
                
                #home article { 
                  height: 458px; 
                  position: absolute; 
                  text-align: center; 
                  top: 150px; 
                  width: 100%; 
                }
                
                #about { 
                  background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
                  height: 1000px; 
                  margin: 0 auto; 
                  width: 100%; 
                  max-width: 1920px; 
                  position: relative; 
                  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
                  box-shadow: 0 0 50px rgba(0,0,0,0.8);
                }
                
                #about article { 
                  height: 458px; 
                  position: absolute; 
                  text-align: center; 
                  top: 150px; 
                  width: 100%; 
                }

Nun sollte es so aussehen ...

Schritt 2: Der magische Code

Ja, das stimmt. Hier beginnt der Zauber! Mit jQuery beginnen wir mit der Standardmethode document.ready(), um sicherzustellen, dass die Seite geladen wurde und bereit ist, bearbeitet zu werden.

                $(document).ready(function(){
                                        
                
                });

Bei dieser Technik wird die Geschwindigkeit des in beiden Abschnitten vorhandenen Hintergrundbildes gesteuert.

Jetzt brauche ich deine Aufmerksamkeit hier. Das erste, was unten passiert, ist, dass wir uns über jeden <section> auf der Seite iterieren, der das Attribut data-type="background" hat.

                $(document).ready(function(){
                
                    $('section[data-type="background"]').each(function(){
                      var $bgobj = $(this); // assigning the object
                    }); 
                
                });

Fügen Sie eine weitere Funktion, .scroll(), in .each() hinzu, die aufgerufen wird, wenn der Benutzer mit dem Scrollen beginnt.

                $(window).scroll(function() {
                   
                });

Wir müssen ermitteln, um wie viel der Benutzer einen Bildlauf durchgeführt hat, und dann den Wert durch den im Markup angegebenen Wert für die data-speed dividieren.

                var yPos = -($window.scrollTop() / $bgobj.data('speed'));

$window.scrollTop(): Wir erhalten den aktuellen Bildlaufwert von oben. Das bestimmt im Wesentlichen, wie viel der Benutzer nach oben gerollt hat. $bgobj.data('speed') bezieht sich auf die im Markup zugewiesene data-speed, und yPos ist der letzte Wert, den wir für den Bildlauf anwenden müssen. Dies ist jedoch ein negativer Wert, da der Hintergrund in die entgegengesetzte Richtung der Bildlaufrichtung des Benutzers verschoben werden muss.

Lassen Sie uns anhand eines Beispiels etwas näher untersuchen:

In der obigen Abbildung beträgt die data-speed 10, und nehmen wir an, dass das Browserfenster um 57px gescrollt wurde. Das bedeutet 57px geteilt durch 10 = 5.7px.

                // Put together our final background position
                var coords = '50% '+ yPos + 'px';
                
                // Move the background
                $bgobj.css({ backgroundPosition: coords });

Das letzte, was wir tun müssen, ist, unsere endgültige Hintergrundposition in einer Variablen zusammenzufassen. Um die horizontale Position des Hintergrunds als statisch zu erhalten, haben wir 50% als xPosition zugewiesen. Dann haben wir yPos als yPosition hinzugefügt und schließlich dem-Hintergrund die Hintergrundkoordinaten zu unserem <section> zugewiesen: $bgobj.css ({backgroundPosition: coords});.

Ihr endgültiger Code könnte folgendermaßen aussehen:

$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object
    
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); 
            
            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });
        }); 
    });    
});

Ja, wir haben es geschafft! Probieren Sie es selbst aus.

IE Fix

Es gibt noch einen letzten Fix: Der ältere IE kann die Tags <section> und <article> nicht darstellen. Das ist jedoch leicht zu beheben. Wir verwenden die Standardlösung zum Erstellen der Elemente, wodurch der Browser die HTML5-Tags magisch erkennt.

                    // Create HTML5 elements for IE
                     
                    document.createElement("article");
                    document.createElement("section");

Außerdem müssen wir eine grundlegende CSS-Reset-Datei verwenden, damit alle Browser einwandfrei funktionieren. Glücklicherweise kümmern sich Werkzeuge wie HTML5 Boilerplate um die Hauptlast der Arbeit, wenn es um Cross-Browser-Normalisierung geht.

Das macht es für diese Lektion! Fragen oder Anmerkungen, die Sie hinzufügen möchten? Lassen Sie es mich wissen!

Wenn Sie nach einer schnellen Lösung mit professionellen Ergebnissen suchen, können Sie die Optionen von Parallax Theme und One Page Template durchsuchen, die bei ThemeForest zum Kauf angeboten werden.