TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare una pagina di parallasse a larghezza intera con Bootstrap?

1

Jumbotron è uno dei componenti Bootstrap che aiuta a creare intestazioni di pagina accattivanti con pulsante di invito all’azione. Il componente jumbotron predefinito ha uno sfondo di colore grigio chiaro e può essere creato a tutta larghezza o essere inserito in un contenitore. Con una piccola regolazione CSS puoi aggiungere un’immagine di sfondo parallasse al componente jumbotron e creare un layout di pagina parallasse a tutta larghezza. In questo articolo discutiamo di più su come creare una pagina di parallasse a larghezza intera con il componente jumbotron Bootstrap. Usiamo la versione 4 CSS, tuttavia, puoi utilizzare anche l’ultima versione.

Come creare una pagina di parallasse a larghezza intera con Bootstrap?

  • Pagina Parallasse CSS
    1. Demo della pagina di parallasse Bootstrap
    2. A partire dal modello di partenza
    3. CSS per l’effetto di parallasse
    4. HTML per sezioni di parallasse
    5. Aggiunta di navigazione e piè di pagina
    6. Codice completo per la pagina di parallasse
  • JavaScript Parallax Page

Pagina Parallasse CSS

Per prima cosa spieghiamo la pagina di parallasse CSS con sfondo fisso.

1 demo della pagina Parallax Bootstrap utilizzando Jumbotron

La sezione parallasse della pagina Bootstrap avrà un aspetto simile a quello riportato di seguito.

Come creare una pagina di parallasse a larghezza intera con Bootstrap?

Bootstrap 4 Pagina Parallasse con Jumbotron

2 Iniziare con il modello di partenza

Il primo passo è iniziare con lo scheletro del modello di avvio Bootstrap. Puoi utilizzare i collegamenti CDN per il foglio di stile e gli script o ospitarli sul tuo server. Prendiamo il seguente modello di partenza con collegamenti CDN come punto di partenza per il nostro layout di pagina.

<!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 per l’effetto di parallasse

La nostra sezione di parallasse ha un’immagine di sfondo con un’altezza minima di 600px, un’intestazione h1 e un paragrafo per aggiungere una breve descrizione.

Per prima cosa creiamo una sezione di parallasse con un’immagine di sfondo fissa, puoi impostare l’altezza minima all’altezza desiderata.

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

Quindi aggiungiamo alcuni stili al paragrafo e all’intestazione H1 come di seguito. Puoi modificare i valori come desideri.

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

Quindi aggiungiamo l’immagine per lo sfondo della singola sezione, abbiamo mostrato qui tre classi CSS per l’aggiunta di tre sezioni. Puoi semplicemente aggiungere ".paralsec3", ".paralsec4", ecc. per aggiungere immagini diverse per ulteriori sezioni.

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

Infine, rimuoviamo il margine inferiore dal componente jumbotron predefinito.

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

Puoi aggiungere tutti i CSS all’interno … tag all’interno della sezione di intestazione del modello di partenza o creare un foglio di stile e un collegamento esterni.

4 Creazione di HTML per le sezioni di parallasse

Di seguito è riportato il codice HTML completo per la pagina di parallasse con tre sezioni. Abbiamo utilizzato il componente pulsante predefinito su ogni sezione.

<!-- 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 Aggiunta di navigazione e piè di pagina

I suddetti blocchi di codice CSS e HTML con modello di partenza creeranno la pagina di parallasse a larghezza intera senza navigazione e piè di pagina. Aggiungi la barra di navigazione utilizzando il componente navbar e il piè di pagina utilizzando il CSS personalizzato di seguito. La navigazione e il piè di pagina completeranno la pagina che può essere utilizzata ovunque indipendentemente.

/* 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 Pagina completa di parallasse Jumbotron

Il codice completo della pagina di parallasse jumbotron Bootstrap 4 apparirà come di seguito. Puoi copiarlo e usarlo sostituendo gli URL delle immagini e i contenuti fittizi con i tuoi.

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

Sebbene l’immagine CSS sopra fissa assomigli a una parallasse, in realtà non è un effetto di parallasse. In parallasse, anche l’immagine di sfondo dovrebbe muoversi relativamente al movimento del contenuto. Può essere fatto solo utilizzando JavaScript. Esistono librerie JavaScript già pronte come jarallax.js che puoi utilizzare per creare sezioni di parallasse a larghezza intera. Sfortunatamente, spiegare l’intero processo sarà più complesso qui. Puoi controllare le seguenti demo e scaricare temi realizzati con Bootstrap.

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More