TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie erstelle ich eine Parallax-Seite in voller Breite mit Bootstrap?

37

Jumbotron ist eine der Bootstrap-Komponenten, die dabei hilft, attraktive Seitenüberschriften mit Call-to-Action-Button zu erstellen. Die Standard-Jumbotron-Komponente hat einen hellgrauen Farbhintergrund und kann mit voller Breite erstellt werden oder in einen Container passen. Mit geringfügigen CSS-Anpassungen können Sie der Jumbotron-Komponente ein Parallax-Hintergrundbild hinzufügen und ein Parallax-Seitenlayout in voller Breite erstellen. In diesem Artikel erfahren Sie mehr darüber, wie Sie eine Parallax-Seite mit voller Breite mit der Bootstrap-Jumbotron-Komponente erstellen. Wir verwenden CSS Version 4, Sie können jedoch auch die neueste Version verwenden.

Wie erstelle ich eine Parallax-Seite in voller Breite mit Bootstrap?

  • CSS Parallax-Seite
    1. Demo der Bootstrap Parallax-Seite
    2. Beginnend mit Starter-Vorlage
    3. CSS für Parallaxeneffekt
    4. HTML für Parallax-Abschnitte
    5. Navigation und Fußzeile hinzufügen
    6. Vollständiger Code für Parallax-Seite
  • JavaScript Parallax-Seite

CSS Parallax-Seite

Lassen Sie uns zunächst die CSS Parallax-Seite mit festem Hintergrund erklären.

1 Demo der Bootstrap Parallax-Seite mit Jumbotron

Der Parallax-Abschnitt der Bootstrap-Seite sieht in etwa wie folgt aus.

Wie erstelle ich eine Parallax-Seite in voller Breite mit Bootstrap?

Bootstrap 4 Parallax Page mit Jumbotron

2 Beginnen mit Starter-Vorlage

Der erste Schritt besteht darin, mit der Skelett- Bootstrap-Startervorlage zu beginnen. Sie können CDN-Links für das Stylesheet und die Skripte verwenden oder auf Ihrem eigenen Server hosten. Nehmen wir das folgende Starter-Template mit CDN-Links als Ausgangspunkt für unser Seitenlayout.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> Add Your Content Here... <!-- Bootstrap 4 Scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>

3 CSS für Parallax-Effekt

Unser Parallax-Bereich hat ein Hintergrundbild mit einer Mindesthöhe von 600px, eine h1-Überschrift und einen Absatz für eine kurze Beschreibung.

Lassen Sie uns zuerst einen Parallaxenabschnitt mit festem Hintergrundbild erstellen, Sie können die Mindesthöhe auf Ihre gewünschte Höhe einstellen.

/* Header Parallax Element Style*/ .paral { min-height: 600px; background-attachment: fixed; background-size: cover; background-position: 50% 50%; }

Dann fügen wir dem Absatz und der H1-Überschrift wie unten einige Stile hinzu. Sie können die Werte nach Belieben ändern.

/* Paragraph for Parallax Section */ .paral p { font-size: 24px; color:#f5f5f5; text-align: center; line-height: 60px; } /* Heading for Parallax Section */ .paral h1 { color: rgba(255, 255, 255, 0.8); font-size: 60px; text-align: center; padding-top: 60px; line-height: 100px; }

Dann fügen wir ein Bild für den Hintergrund der einzelnen Abschnitte hinzu. Wir haben hier drei CSS-Klassen zum Hinzufügen von drei Abschnitten gezeigt. Sie können einfach „.paralsec3″, „.paralsec4″ usw. hinzufügen, um verschiedene Bilder für weitere Abschnitte hinzuzufügen.

/* Image for Parallax Section */ .paralsec { background-image: url("https://img.webnots.com/2017/05/parallax.jpg"); } .paralsec1 { background-image: url("https://img.webnots.com/2017/05/parallax1.jpg");} .paralsec2 { background-image: url("https://img.webnots.com/2015/11/parallax2.jpg"); } /* Add more images for more sections */

Lassen Sie uns schließlich den unteren Rand von der Standard-Jumbotron-Komponente entfernen.

/* Remove Bottom Margin from Jumbotron */ .jumbotron{margin-bottom: 0;}

Sie können entweder das gesamte CSS in …-Tags im Header-Bereich des Starter-Templates hinzufügen oder ein externes Stylesheet und einen Link erstellen.

4 Erstellen von HTML für Parallax-Abschnitte

Unten finden Sie den vollständigen HTML-Code für die Parallax-Seite mit drei Abschnitten. Wir haben in jedem Abschnitt die Standard- Schaltflächenkomponente verwendet .

<!-- First Parallax Section --> <div class="jumbotron paral paralsec"> <h1 class="display-3">Here is a heading 1</h1> <p class="lead">Here is a short description 1</p> <p class="lead"> <a class="btn btn-info btn-lg btn-md" href="#" role="button">Here is a button 1</a> </p> </div> <!-- Second Parallax Section --> <div class="jumbotron paral paralsec1"> <h1 class="display-3">Here is a heading 2</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-warning btn-lg btn-md" href="widgets.html" role="button">Here is a button 2</a> </p> </div> <!-- Third Parallax Section --> <div class="jumbotron paral paralsec2"> <h1 class="display-3">Here is a heading 3</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-primary btn-lg btn-md" href="themes.html" role="button">Here is a button 3</a> </p> </div> <!-- Add More Parallax Sections Here -->

5 Hinzufügen von Navigation und Fußzeile

Die obigen CSS- und HTML-Codeblöcke mit Starter-Template machen die Parallax-Seite in voller Breite ohne Navigation und Fußzeile. Fügen Sie die Navigationsleiste mit der Navbar-Komponente und die Fußzeile mit dem folgenden benutzerdefinierten CSS hinzu. Navigation und Fußzeile vervollständigen die Seite, die überall unabhängig verwendet werden kann.

/* Footer */ .wn-footer { padding: 2.5rem 0; text-align: center; color: white; background-color: #607D8B; border-top: .05rem solid #e5e5e5; } .wn-footer a { color: yellow; }

6 Komplette Jumbotron Parallax Seite

Der vollständige Code der Bootstrap 4 Jumbotron Parallax-Seite sieht wie folgt aus. Sie können es kopieren und verwenden, indem Sie die Bild-URLs und Dummy-Inhalte durch Ihre eigenen ersetzen.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style> /* Header Parallax Element Style*/ .paral { min-height: 600px; background-attachment: fixed; background-size: cover; background-position: 50% 50%; } /* Paragrapgh for Parallax Section */ .paral p { font-size: 24px; color:#f5f5f5; text-align: center; line-height: 60px; } /* Heading for Parallax Section */ .paral h1 { color: rgba(255, 255, 255, 0.8); font-size: 60px; text-align: center; padding-top: 60px; line-height: 100px; } /* Image for Parallax Section */ .paralsec { background-image: url("https://img.webnots.com/2017/05/parallax.jpg"); } .paralsec1 { background-image: url("https://img.webnots.com/2017/05/parallax1.jpg");} .paralsec2 { background-image: url("https://img.webnots.com/2015/11/parallax2.jpg"); } /* Add more images for more sections */ /* Remove Bottom Margin from Jumbotron */ .jumbotron{margin-bottom: 0;} /* Footer */ .wn-footer { padding: 2.5rem 0; text-align: center; color: white; background-color: #607D8B; border-top: .05rem solid #e5e5e5; } .wn-footer a { color: yellow; } </style> </head> <body> <!-- First Parallax Section --> <div class="jumbotron paral paralsec"> <h1 class="display-3">Here is a heading 1</h1> <p class="lead">Here is a short description 1</p> <p class="lead"> <a class="btn btn-info btn-lg btn-md" href="#" role="button">Here is a button 1</a> </p> </div> <!-- Second Parallax Section --> <div class="jumbotron paral paralsec1"> <h1 class="display-3">Here is a heading 2</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-warning btn-lg btn-md" href="widgets.html" role="button">Here is a button 2</a> </p> </div> <!-- Third Parallax Section --> <div class="jumbotron paral paralsec2"> <h1 class="display-3">Here is a heading 3</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-primary btn-lg btn-md" href="themes.html" role="button">Here is a button 3</a> </p> </div> <!-- Add More Parallax Sections Here --> <!-- Footer Section --> <footer class="wn-footer"> <p>This is a Bootstrap 4 parallax page with jumbotron created by <a href="https://www.webnots.com/">WebNots Web Consulting Services</a></p> <p> <a href="#">Back to top</a> </p> </footer> <!-- Bootstrap 4 Scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> </body> </html>

JavaScript Parallax-Seite

Obwohl das obige CSS-fixierte Bild wie eine Parallaxe aussieht, ist es nicht wirklich ein Parallaxeneffekt. Bei Parallaxe sollte sich das Hintergrundbild auch relativ zur Inhaltsbewegung bewegen. Dies ist nur mit JavaScript möglich. Es gibt vorgefertigte JavaScript-Bibliotheken wie jarallax.js, mit denen Sie Parallax-Abschnitte in voller Breite erstellen können. Leider wird die Erklärung des gesamten Prozesses hier komplexer. Sie können sich die folgenden Demos ansehen und Themen herunterladen, die mit Bootstrap erstellt wurden.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen