TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag en parallax -sida med full bredd med Bootstrap?

13

Jumbotron är en av Bootstrap -komponenterna som hjälper till att skapa attraktiva sidhuvuden med uppmaningsknapp. Standard jumbotron -komponenten har ljusgrå färgbakgrund och kan skapas med full bredd eller passa in i en behållare. Med mindre CSS -justering kan du lägga till parallax bakgrundsbild till jumbotron -komponenten och skapa en parallax -sidlayout i full bredd. I den här artikeln låt oss diskutera mer om hur man skapar parallaksida i full bredd med Bootstrap jumbotron -komponent. Vi använder version 4 CSS, men du kan också använda den senaste versionen.

Hur skapar jag en parallax -sida med full bredd med Bootstrap?

  • CSS Parallax -sida
    1. Demo av Bootstrap parallax sida
    2. Börjar med startmall
    3. CSS för parallaxeffekt
    4. HTML för parallaxavsnitt
    5. Lägger till navigering och sidfot
    6. Komplett kod för parallax sida
  • JavaScript Parallax -sida

CSS Parallax -sida

Låt oss först förklara CSS -parallax -sidan med fast bakgrund.

1 Demo av Bootstrap Parallax -sida med Jumbotron

Parallaxavsnittet på Bootstrap -sidan kommer att se ut ungefär som nedan.

Hur skapar jag en parallax -sida med full bredd med Bootstrap?

Bootstrap 4 Parallax -sida med Jumbotron

2 Börjar med startmall

Det första steget är att börja med skelett Bootstrap startmall. Du kan använda CDN -länkar för formatmall och skript eller vara värd för dem på din egen server. Låt oss ta nedanstående startmall med CDN -länkar som utgångspunkt för vår sidlayout.

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

Vår parallaxavsnitt har en bakgrundsbild med minsta höjd som 600px, en h1 -rubrik och ett stycke för att lägga till en kort beskrivning.

Låt oss först skapa parallaxavsnitt med fast bakgrundsbild, du kan ställa in minsta höjd till önskad höjd.

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

Låt oss sedan lägga till några stilar till stycket och rubriken H1 som nedan. Du kan ändra värdena som du önskar.

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

Sedan lägger vi till bild för enskild sektions bakgrund, vi har här visat tre CSS -klasser för att lägga till tre sektioner. Du kan bara lägga till ".paralsec3", ".paralsec4", etc. för att lägga till olika bilder för ytterligare avsnitt.

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

Låt oss slutligen ta bort den undre marginalen från standard jumbotron -komponenten.

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

Du kan antingen lägga till alla CSS inuti … -taggar inom rubriken i startmallen eller skapa ett externt formatmall och länk.

4 Skapa HTML för Parallax -sektioner

Nedan finns den fullständiga HTML -koden för parallax -sidan med tre sektioner. Vi har använt standardknappkomponent i varje avsnitt.

<!-- 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 Lägga till navigering och sidfot

Ovanstående CSS- och HTML -kodblock med startmall gör parallax -sidan i full bredd utan navigering och sidfot. Lägg till navigeringsfältet med navbar -komponenten och sidfoten med hjälp av anpassad CSS nedan. Navigering och sidfot gör sidan komplett som kan användas var som helst oberoende.

/* 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 Komplett Jumbotron Parallax -sida

Den fullständiga koden för Bootstrap 4 jumbotron parallax -sidan kommer att se ut nedan. Du kan kopiera och använda den genom att ersätta bildadresserna och dummyinnehållet med ditt eget.

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

Även om den ovanstående CSS -fasta bilden ser ut som en parallax, är det inte riktigt en parallaxeffekt. I parallax bör bakgrundsbilden också flytta relativt innehållsrörelsen. Det kan bara göras med JavaScript. Det finns färdiga JavaScript -bibliotek som jarallax.js som du kan använda för att skapa parallaxavsnitt i full bredd. Tyvärr blir det mer komplext att förklara hela processen här. Du kan kolla in följande demos och ladda ner teman gjorda med Bootstrap.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer