In diesem Tutorial sehen wir uns auf einfachste Weise einen schönen Parallax-Scrolling-Effekt mit stationären Hintergründen und scrollenden Inhalten an.

Laden Sie die Quelldateien herunter Sehen Sie sich die Demo an

Eine kurze Einführung

Parallaxe ist ein Effekt, bei dem die Position eines Objekts unterschiedlich zu sein scheint, wenn es aus verschiedenen Positionen betrachtet wird. Die Parallaxenbewegung oder in unserem Fall das Parallaxenscrollen gibt uns dann die Illusion, dass sich zwei Objekte in derselben Sichtlinie, aber mit einem Abstand zwischen ihnen, mit unterschiedlichen Geschwindigkeiten zu bewegen scheinen. Wenn Sie schon einmal aus einem Autofenster geschaut haben, während Sie mit 100 km/h auf einer Autobahn gefahren sind, werden Sie feststellen, dass die Strommasten mit hoher Geschwindigkeit vorbeizuziehen scheinen, während sich die Berge im Hintergrund wirklich langsam zu bewegen scheinen , fast zum Stillstand. Dies ist Parallaxenbewegung in Aktion.

Was das Web betrifft, können wir einen Parallax-Effekt bei Containern hervorrufen, die Hintergrundbilder und Text darüber haben. In seiner einfachsten Form bewirkt Parallax-Scrolling, dass der Inhalt normal scrollt und der Hintergrund stationär bleibt. Das Schöne an dieser Technik in ihrer einfachsten Form ist, dass sie nur CSS erfordert. Lassen Sie uns eintauchen.

Das Markup & die Struktur

Wenn Sie eine reparierte Website hätten, die nicht reagiert, gäbe es keine Tricks, um dies zu erreichen. Wir befinden uns jedoch im Zeitalter des responsiven Webdesigns, also ist das ein No-Go. Keine Angst! Wir haben ein nettes CSS zur Verfügung. Aber zuerst ein Blick auf etwas Markup. Das Markup ist einfach – wir haben abwechselnd Hintergrund-/ sections und sections für maximale Wirkung. So sieht es aus:

  

    
Heiter
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Erhebt euch
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Ruhig
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  

Jeder section mit einer parallax enthält unsere Hintergrundbilder und Überschriftentext, während jeder section mit einer content einfache inhaltshaltige Abschnitte sein wird. Die container ist ein flüssiges div mit einer maximalen Breite, was die Reaktionsfähigkeit von allem sehr einfach macht. Lassen Sie uns nun in das CSS eintauchen.

Mit CSS gestalten und zum Laufen bringen

Als erstes ist zu beachten, dass alle meine Hintergrundbilder eine width von 1600 Pixel und eine height von 600 Pixel haben. Dadurch kann ich meine Parallaxenabschnitte auf eine feste Höhe von 600 Pixel einstellen. Es steckt aber noch ein bisschen mehr dahinter. Da ich keine sich wiederholenden Hintergründe möchte (ich verwende große und fette Bilder), kann ich nicht immer erwarten, dass Benutzer die maximale Breite haben (wodurch die Hintergrundbilder vollständig sichtbar sind). Zum Glück können wir die CSS-Eigenschaft background-size verwenden und sie auf cover setzen. Dadurch wird das Hintergrundbild gezwungen, den gesamten verfügbaren Platz einzunehmen, indem es proportional erweitert wird. Es muss jedoch für maximale Unterstützung vorangestellt werden, also denken Sie daran.

So weit so gut, bis auf das Wichtigste. Unser Hintergrundbild muss an Ort und Stelle bleiben, während unser Inhalt daran vorbeiscrollt. Auch hier macht CSS uns das Leben leicht. Wir verwenden die Eigenschaft background-attachment und setzen sie auf fixed . Einfach! So sieht mein CSS aus, mit einigen Beispiel-Medienabfragen:

 /* ============================================= ============
  PRIMÄRSTRUKTUR
=============================================== ========== */
.container {
  maximale Breite: 960px;
  Rand: 0 automatisch;
}
/* ============================================= ============
  ABSCHNITTE
=============================================== ========== */
section.module:last-child {
  Rand unten: 0;
}
Abschnitt.Modul h2 {
  Rand unten: 40px;
  Schriftfamilie: "Roboto Slab", serif;
  Schriftgröße: 30px;
}
Abschnitt.Modul p {
  Rand unten: 40px;
  Schriftgröße: 16px;
  Schriftstärke: 300;
}
section.module p:last-child {
  Rand unten: 0;
}
Abschnitt.Modul.Inhalt {
  Polsterung: 40px 0;
}
Abschnitt.Modul.Parallaxe {
  Höhe: 600px;
  Hintergrundposition: 50% 50%;
  Hintergrundwiederholung: keine Wiederholung;
  Hintergrund-Anhang: behoben;
  Hintergrundgröße: Cover;
}
Abschnitt.Modul.Parallaxe h1 {
  Farbe: RGB (255, 255, 255, 0,8);
  Schriftgröße: 48px;
  Zeilenhöhe: 600px;
  Schriftstärke: 700;
  Textausrichtung: Mitte;
  Texttransformation: Großbuchstaben;
  Textschatten: 0 0 10px rgba(0, 0, 0, 0,2);
}
Abschnitt.Modul.Parallax-1 {
  Hintergrundbild: url(../img/demo/_small/1.jpg");
}
Abschnitt.Modul.Parallax-2 {
  Hintergrundbild: url(../img/demo/_small/2.jpg");
}
Abschnitt.Modul.Parallax-3 {
  Hintergrundbild: url(../img/demo/_small/3.jpg");
}

@media alle und (Mindestbreite: 600px) {
  Abschnitt.Modul h2 {
    Schriftgröße: 42px;
  }
  Abschnitt.Modul p {
    Schriftgröße: 20px;
  }
  Abschnitt.Modul.Parallaxe h1 {
    Schriftgröße: 96px;
  }
}
@media alle und (Mindestbreite: 960px) {
  Abschnitt.Modul.Parallaxe h1 {
    Schriftgröße: 160px;
  }
}

Browser-Unterstützung und Eigentumsinformationen

Die Browserunterstützung im Allgemeinen ist wirklich großartig. IE8 und niedriger unterstützen die Eigenschaft background-size nicht, aber ein einfacher bedingter Stil sollte sich darum kümmern. Abgesehen davon wird alles unterstützt und Sie sollten keine Probleme haben. Weitere Informationen zu den in diesem Tutorial verwendeten CSS-Eigenschaften finden Sie im MDN:

• Hintergrundposition – MDN-Referenz
• Hintergrundgröße – MDN-Referenz
• Hintergrundanhang – MDN-Referenz

Einpacken

Hier haben wir etwas implementiert, das einfach, effektiv und ein bisschen anders ist als die gewöhnliche Art von Alles-auf-einmal-Scrollen. Wir haben einige nette, aber weniger bekannte CSS-Techniken verwendet, um unseren gewünschten Effekt zu erzielen. Und das ist ein Wrap! Vergessen Sie nicht, dass Sie die Demo ansehen und die Quelle herunterladen können, indem Sie auf die Links unten klicken, und wenn Sie Fragen, Kommentare oder Feedback haben, können Sie diese auch unten hinterlassen.