TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer une page de parallaxe pleine largeur avec Bootstrap?

22

Jumbotron est l’un des composants Bootstrap qui permet de créer des en-têtes de page attrayants avec un bouton d’appel à l’action. Le composant jumbotron par défaut a un fond de couleur gris clair et peut être créé en pleine largeur ou tenir dans un conteneur. Avec un ajustement CSS mineur, vous pouvez ajouter une image d’arrière-plan de parallaxe au composant jumbotron et créer une mise en page de parallaxe pleine largeur. Dans cet article, discutons davantage de la façon de créer une page de parallaxe pleine largeur avec le composant Bootstrap jumbotron. Nous utilisons la version 4 CSS, cependant, vous pouvez également utiliser la dernière version.

Comment créer une page de parallaxe pleine largeur avec Bootstrap?

  • Page de parallaxe CSS
    1. Démo de la page de parallaxe Bootstrap
    2. Commencer avec le modèle de démarrage
    3. CSS pour effet de parallaxe
    4. HTML pour les sections de parallaxe
    5. Ajout de navigation et de pied de page
    6. Code complet pour la page de parallaxe
  • Page de parallaxe JavaScript

Page de parallaxe CSS

Expliquons d’abord la page de parallaxe CSS avec un arrière-plan fixe.

1 démo de la page Bootstrap Parallax utilisant Jumbotron

La section de parallaxe de la page Bootstrap ressemblera à quelque chose comme ci-dessous.

Comment créer une page de parallaxe pleine largeur avec Bootstrap?

Bootstrap 4 Parallax Page avec Jumbotron

2 Commencer avec le modèle de démarrage

La première étape consiste à commencer avec le modèle de démarrage squelette Bootstrap. Vous pouvez utiliser des liens CDN pour la feuille de style et les scripts ou les héberger sur votre propre serveur. Prenons le modèle de démarrage ci-dessous avec des liens CDN comme point de départ pour notre mise en page.

<!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 pour l’effet de parallaxe

Notre section de parallaxe a une image d’arrière-plan avec une hauteur minimale de 600px, un titre h1 et un paragraphe pour ajouter une courte description.

Créons d’abord une section de parallaxe avec une image d’arrière-plan fixe, vous pouvez définir la hauteur minimale à la hauteur souhaitée.

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

Ajoutons ensuite quelques styles au paragraphe et à l’en-tête H1 comme ci-dessous. Vous pouvez modifier les valeurs comme vous le souhaitez.

/* 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; }

Ensuite, nous ajoutons une image pour l’arrière-plan de chaque section, nous avons montré ici trois classes CSS pour ajouter trois sections. Vous pouvez simplement ajouter ".paralsec3", ".paralsec4", etc. pour ajouter différentes images pour d’autres sections.

/* 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 */

Enfin, supprimons la marge inférieure du composant jumbotron par défaut.

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

Vous pouvez soit ajouter toutes les balises CSS inside… dans la section d’en-tête du modèle de démarrage, soit créer une feuille de style externe et un lien.

4 Création de code HTML pour les sections de parallaxe

Vous trouverez ci-dessous le code HTML complet de la page de parallaxe avec trois sections. Nous avons utilisé le composant de bouton par défaut sur chaque section.

<!-- 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 Ajout de la navigation et du pied de page

Les blocs de code CSS et HTML ci-dessus avec le modèle de démarrage créeront la page de parallaxe pleine largeur sans navigation ni pied de page. Ajoutez la barre de navigation à l’aide du composant navbar et le pied de page à l’aide du CSS personnalisé ci-dessous. La navigation et le pied de page rendront la page complète qui peut être utilisée n’importe où indépendamment.

/* 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 Page complète de parallaxe Jumbotron

Le code complet de la page de parallaxe jumbotron Bootstrap 4 ressemblera à ci-dessous. Vous pouvez le copier et l’utiliser en remplaçant les URL des images et le contenu factice par les vôtres.

<!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>

Page de parallaxe JavaScript

Bien que l’image fixe CSS ci-dessus ressemble à une parallaxe, ce n’est pas vraiment un effet de parallaxe. En parallaxe, l’image d’arrière-plan doit également se déplacer relativement au mouvement du contenu. Cela ne peut être fait qu’à l’aide de JavaScript. Il existe des bibliothèques JavaScript prêtes à l’emploi comme jarallax.js que vous pouvez utiliser pour créer des sections de parallaxe pleine largeur. Malheureusement, expliquer l’ensemble du processus sera plus complexe ici. Vous pouvez consulter les démos suivantes et télécharger des thèmes créés avec Bootstrap.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails