TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda täysleveä parallaksisivu Bootstrapilla?

2

Jumbotron on yksi Bootstrap -komponenteista, joka auttaa luomaan houkuttelevia sivun ylätunnisteita toimintakehotuspainikkeella. Jumbotron -oletuskomponentin taustaväri on vaaleanharmaa, ja se voidaan luoda koko leveydellä tai mahtua säiliöön. Pienellä CSS -säädöllä voit lisätä parallaksin taustakuvan jumbotron -komponenttiin ja luoda täyden leveyden parallaksisivun asettelun. Tässä artikkelissa keskustellaan enemmän siitä, kuinka luoda täysleveä parallaksisivu Bootstrap -jumbotron -komponentilla. Käytämme versiota 4 CSS, mutta voit käyttää myös uusinta versiota.

Kuinka luoda täysleveä parallaksisivu Bootstrapilla?

  • CSS Parallax -sivu
    1. Bootstrap parallaksisivun demo
    2. Aloitetaan aloitusmallilla
    3. CSS parallaksia varten
    4. HTML parallaksiosille
    5. Lisätään navigointi ja alatunniste
    6. Täydellinen koodi parallaksisivulle
  • JavaScript -parallaksisivu

CSS Parallax -sivu

Selitämme ensin CSS -parallaksisivun, jolla on kiinteä tausta.

1 Bootstrap Parallax -sivun esittely Jumbotronin avulla

Bootstrap -sivun parallaksiosa näyttää seuraavanlaiselta.

Kuinka luoda täysleveä parallaksisivu Bootstrapilla?

Bootstrap 4 Parallax -sivu Jumbotronin kanssa

2 Aloitus Aloitusmallilla

Ensimmäinen askel on aloittaa luuranko Bootstrap -käynnistysmallilla. Voit käyttää CDN -linkkejä tyylitaulukkoon ja komentosarjoihin tai isännöidä niitä omalla palvelimellasi. Otetaan alla oleva CDN -linkkejä sisältävä aloitusmalli sivun ulkoasun lähtökohtana.

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

Parallax -osastossamme on taustakuva, jonka vähimmäiskorkeus on 600 pikseliä, h1 -otsikko ja kappale lyhyen kuvauksen lisäämiseksi.

Luodaan ensin parallaksiosa, jossa on kiinteä taustakuva, voit asettaa minimikorkeuden haluamaasi korkeuteen.

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

Lisäämme sitten joitain tyylejä kappaleeseen ja H1 -otsikkoon, kuten alla. Voit muokata arvoja haluamallasi tavalla.

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

Sitten lisäämme kuvan yksittäisen osion taustaa varten, olemme näyttäneet tässä kolme CSS -luokkaa kolmen osion lisäämiseksi. Voit lisätä ".paralsec3", ".paralsec4" jne. Lisätäksesi erilaisia ​​kuvia jatko -osia varten.

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

Lopuksi poistetaan alempi marginaali jumbotron -oletuskomponentista.

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

Voit joko lisätä kaikki CSS… -tunnisteet sisälle aloitusmallin otsikko -osioon tai luoda ulkoisen tyylitaulukon ja linkin.

4 Parallax -osioiden HTML -koodin luominen

Alla on parallaksisivun täydellinen HTML -koodi, jossa on kolme osaa. Olemme käyttäneet oletuksena painiketta komponentin jokaisen lohkon.

<!-- 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 Navigoinnin ja alatunnisteen lisääminen

Yllä olevat CSS- ja HTML -koodilohkot aloitusmallilla muodostavat täyden leveyden parallaksisivun ilman navigointia ja alatunnistetta. Lisää navigointipalkin avulla navbar komponenttia ja footer käyttämällä alla oman CSS. Navigointi ja alatunniste tekevät sivusta täydellisen, jota voidaan käyttää missä tahansa itsenäisesti.

/* 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 Täytä Jumbotron Parallax -sivu

Bootstrap 4 jumbotron parallaksisivun täydellinen koodi näyttää alla. Voit kopioida ja käyttää sitä korvaamalla kuvan URL -osoitteet ja nukkesisällön omilla.

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

Vaikka yllä oleva kiinteä CSS -kuva näyttää parallaksilta, se ei todellakaan ole parallaksitehoste. Parallaksissa myös taustakuvan pitäisi liikkua suhteessa sisällön liikkeeseen. Se voidaan tehdä vain JavaScriptin avulla. On valmiita JavaScript -kirjastoja, kuten jarallax.js, joiden avulla voit luoda täysleveitä parallaksiosia. Valitettavasti koko prosessin selittäminen on täällä monimutkaisempaa. Voit tutustua seuraaviin demoihin ja ladata Bootstrapilla tehtyjä teemoja .

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja