Tecnica Bootstrap

Bootstrap è un framework popolare con molti componenti pronti per l'uso tra cui scegliere. Bootstrap può ottimizzare il codice per l'implementazione dello scorrimento parallasse.

In questo capitolo, discutiamo con un esempio di come utilizzeremo il componente Jumbotron per implementare lo scorrimento della parallasse.

Pagina parallasse a larghezza intera con Bootstrap4 Jumbotron

Immagina un sito web in cui all'utente viene mostrato un grande riquadro di "invito all'azione" con alcuni contenuti riguardanti uno sconto o una vendita. Di solito, Jumbotron trova la sua applicazione in tali luoghi. È una grande scatola utile per attirare l'attenzione dell'utente.

Poiché stiamo utilizzando solo un componente di Bootstrap, non creeremo un file CSS separato per questo esempio. Immergiamoci direttamente nel codice 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>

Analisi del codice

Il line 6fa riferimento alla libreria Bootstrap 4. Stiamo specificando il margine e il raggio del bordo per jumbotron daline 8 to 11.

Come possiamo vedere su line 33, stiamo creando un div con la classe jumbotron per mostrare la grande scatola in cui avremo caricata la nostra immagine specifica. Tieni presente che questa volta non esiste un URL diretto per l'immagine, utilizzeremo un'immagine scaricata. Puoi scaricare qualsiasi immagine ad alta risoluzione per il tuo esempio e specificarla inline 16.

L'output che puoi vedere quando esegui il codice sopra indicato è mostrato di seguito -