Bootstrap Parallax Effekt

Um ein einfaches Bootstrap-Template interessanter zu gestalten, integrieren wir einen Parallax-Effekt.
Damit können wir mehrere Hintergründe einfügen, die beim Scrollen zu sehen sind.
Ein Live-Demo zeigt, was wir hier vorhaben.

Schritt 1: HTML-Code

Zuerst bereiten wir das Bootstrap-Template vor.
Legen Sie sich eine webtaugliche Ordnerstruktur zurecht und fügen Sie dort die folgenden Dateien richtig ein.

index.html

Dies ist die Minimal-Variante damit wir das Bootstrap-Framework nutzen können. Jetzt können wir damit beginnen, der Webseite neue Elemente hinzuzufügen.

Navigation

Nun fügen wir eine Navigation ein.

Section 1 – Home

Der erste Abschnitt ist eine Container in voller Größe.

Section 2 – About

Es gibt zwei Spalten, das Bild befindet sich in der ersten Spalte, und der zentrierte Text befindet sich in der rechten Spalte.

Section 3 – Services

Dieser grüne Abschnitt besteht aus vier Elementen mit Glyphensymbolen, die durch von Bootstrap bereitgestellt werden.

Section 4 – Information

Dies ist der zweite breite Abschnitt mit vollflächigem Hintergrund, außerdem gibt es zwei zusätzliche Panels.

Section 5 – Kontakt und Footer

Dies ist der zweite breite Abschnitt mit vollflächigem Hintergrund, außerdem gibt es zwei zusätzliche Panels.

Schritt 2: CSS

Die Standard-Bootstrap-Elemente werden bereits durch Bootstrap formatiert. Für alle anderen Elemente benötigen wir noch die passenden CSS-Eigenschaften.

css/styles.css

					
					/* general styles */
					html, body {
					  height: 100%;
					  width: 100%;
					}

					.container-fluid {
						padding-top: 50px;
						padding-bottom: 50px;	
					}

					/* vertical-centered text */
					.text-vcenter {
					  display: table-cell;
					  text-align: center;
					  vertical-align: middle;
					}

					.text-vcenter h1 {
					  font-size: 4.5em;
					  font-weight: 700;
					  color: #FFF;
					  margin: 0;
					  padding: 0;
					}
					
					.text-vcenter h3 {
					  color: #FFF;
					}

					/* additional sections */
					#home {
					  background: url(../images/home.jpg) no-repeat center center fixed;
					  display: table;
					  height: 100%;
					  position: relative;
					  width: 100%;
					  -webkit-background-size: cover;
					  -moz-background-size: cover;
					  -o-background-size: cover;
					  background-size: cover;
					}

					#about {
					}

					#services {
					  background-color: #b7d202;
					  color: #ffffff;
					}

					#services .glyphicon {
					  border: 2px solid #FFFFFF;
					  border-radius: 50%;
					  display: inline-block;
					  font-size: 60px;
					  height: 140px;
					  line-height: 140px;
					  text-align: center;
					  vertical-align: middle;
					  width: 140px;
					}

					#information {
					  background: url(../images/movie.jpg) no-repeat center center fixed;
					  display: table;
					  height: 800px;
					  position: relative;
					  width: 100%;
					  -webkit-background-size: cover;
					  -moz-background-size: cover;
					  -o-background-size: cover;
					  background-size: cover;
					}

					#information .panel {
					  opacity: 0.85;
					}

					#google_map {
					  height: 500px;
					}

					footer {
					  padding: 20px 0;
					}

					footer .glyphicon {
					  color: #333333;
					  font-size: 60px;
					}

					footer .glyphicon:hover {
					  color: #306d9f;
					}

Schritt 4: JavaScript

Am Ende befindet sich die Google Map, um sie (mit einer vordefinierten Adresse) zu initialisieren, müssen wir den folgenden Code hinzufügen.

js/main.js

Demo

Ein Live-Demo kann hier angesehen werden.

Download

Die Demoversion kann hier heruntergeladen werden:
Download Bootstrap Parallax Effect

Vertiefende Übung

Aufgabe
Erweitern Sie selbstständig die vorhandene index.html um einen weiteren Container und fügen Sie über das CSS ein weiteres Parallax-Hintergrundbild für den neuen Container ein.

Beachten Sie folgende Hinweise:
  • Container in HTML-Code einfügen und passend dazu die Navigation anlegen
  • Vergeben Sie eine ID für den neuen Ankerpunkt
  • Verwenden Sie diese ID zur Formatierung des Containers und für das neue Hintergrundbild
  • Vergleichen Sie dazu das vorhandene CSS