Technique Bootstrap

Bootstrap est un framework populaire avec de nombreux composants prêts à l'emploi. Bootstrap peut optimiser le code pour implémenter le défilement de parallaxe.

Dans ce chapitre, discutons avec un exemple de la façon dont nous allons utiliser le composant Jumbotron pour implémenter le défilement de parallaxe.

Page de parallaxe pleine largeur avec Bootstrap4 Jumbotron

Imaginez un site Web où l'utilisateur est présenté avec une grande boîte «appel à l'action» avec du contenu concernant une remise ou une vente. Habituellement, Jumbotron trouve son application dans de tels endroits. C'est une grande boîte utile pour attirer l'attention de l'utilisateur.

Comme nous n'utilisons qu'un seul composant de Bootstrap, nous ne créerons pas de fichier CSS séparé pour cet exemple. Laissez-nous plonger directement dans le code HTML.

<!DOCTYPE html>  
<html lang = "en">  
   <head>  
      <meta charset = "utf-8">  
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> 
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
         integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
         crossorigin = "anonymous">  
      
      <style>  
         .jumbotron{  
            margin:15px 30px 0px 30px;  
            border-radius:10px;  
            background:   
            linear-gradient(
               rgba(0, 0, 250, 0.25), 
               rgba(125, 250, 250, 0.45)),
               url(img/ruin.jpg);  
            
            background-repeat: no-repeat;  
            background-attachment: fixed;  
            color:white !important;  
            height:440px;  
         }  
         .page-scroll {
            height:5000px;  
         }  
         .lead {
            font-family:raleway;  
            font-weight:100;  
            margin-top:-10px;  
         }  
      </style>  
   </head>  
   
   <body>  
      <div class = "jumbotron jumbotron-fluid">  
         <div class = "container">  
            <h1 class = "display-2">Jumbotron Example</h1>  
            <p class = "lead">Example text for parallax using jumbotron</p>  
         </div>  
      </div>  
      <div class = "page-scroll"> </div>  
   </body>
   
</html>

Analyse du code

le line 6fait référence à la bibliothèque Bootstrap 4. Nous spécifions la marge et le rayon de la bordure pour le jumbotron à partir deline 8 to 11.

Comme on peut le voir sur line 33, nous créons un div avec la classe jumbotron pour montrer la grande boîte où nous aurons notre image spécifique chargée. Veuillez noter qu'il n'y a pas d'URL directe pour l'image cette fois, nous allons utiliser une image téléchargée. Vous pouvez télécharger n'importe quelle image haute résolution pour votre exemple et la spécifier dansline 16.

La sortie que vous pouvez voir lorsque vous exécutez le code ci-dessus est indiquée ci-dessous -