TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć stronę paralaksy o pełnej szerokości za pomocą Bootstrapa?

3

Jumbotron to jeden z komponentów Bootstrap, który pomaga tworzyć atrakcyjne nagłówki stron z przyciskiem wezwania do działania. Domyślny komponent jumbotron ma tło w kolorze jasnoszarym i można go utworzyć z pełną szerokością lub zmieścić w kontenerze. Z niewielką korektą CSS możesz dodać obraz tła paralaksy do komponentu jumbotron i stworzyć układ strony paralaksy o pełnej szerokości. W tym artykule porozmawiajmy więcej o tym, jak stworzyć stronę paralaksy o pełnej szerokości za pomocą komponentu jumbotron Bootstrap. Używamy CSS w wersji 4, jednak możesz również użyć najnowszej wersji.

Jak stworzyć stronę paralaksy o pełnej szerokości za pomocą Bootstrapa?

  • Strona paralaksy CSS
    1. Demo strony paralaksy Bootstrap
    2. Zaczynając od szablonu startowego
    3. CSS dla efektu paralaksy
    4. HTML dla sekcji paralaksy
    5. Dodanie nawigacji i stopki
    6. Kompletny kod dla strony paralaksy
  • Strona paralaksy JavaScript

Strona paralaksy CSS

Najpierw wyjaśnijmy stronę paralaksy CSS ze stałym tłem.

1 Demo strony Bootstrap Parallax przy użyciu Jumbotron

Sekcja paralaksy na stronie Bootstrap będzie wyglądać mniej więcej tak, jak poniżej.

Jak stworzyć stronę paralaksy o pełnej szerokości za pomocą Bootstrapa?

Bootstrap 4 Strona paralaksy z Jumbotron

2 Zaczynając od szablonu startowego

Pierwszym krokiem jest rozpoczęcie od szablonu startowego szkieletu Bootstrap. Możesz użyć łączy CDN do arkusza stylów i skryptów lub hostować je na własnym serwerze. Weźmy poniższy szablon startowy z linkami CDN jako punkt wyjścia dla naszego układu strony.

<!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 dla efektu paralaksy

Nasza sekcja paralaksy zawiera obraz tła o minimalnej wysokości 600 pikseli, nagłówek h1 i akapit do dodania krótkiego opisu.

Najpierw stwórzmy sekcję paralaksy ze stałym obrazem tła, możesz ustawić minimalną wysokość do żądanej wysokości.

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

Następnie dodajmy kilka stylów do akapitu i nagłówka H1, jak poniżej. Możesz dowolnie modyfikować wartości.

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

Następnie dodajemy obraz do tła poszczególnych sekcji, pokazaliśmy tutaj trzy klasy CSS do dodania trzech sekcji. Możesz po prostu dodać „.paralsec3", „.paralsec4″ itp., aby dodać różne obrazy do dalszych sekcji.

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

Na koniec usuńmy dolny margines z domyślnego komponentu jumbotron.

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

Możesz dodać wszystkie CSS wewnątrz … tagów w sekcji nagłówka szablonu startowego lub utworzyć zewnętrzny arkusz stylów i link.

4 Tworzenie HTML dla sekcji paralaksy

Poniżej znajduje się kompletny kod HTML strony paralaksy z trzema sekcjami. W każdej sekcji użyliśmy domyślnego komponentu przycisku.

<!-- 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 Dodawanie nawigacji i stopki

Powyższe bloki kodu CSS i HTML z szablonem startowym utworzą stronę paralaksy o pełnej szerokości bez nawigacji i stopki. Dodaj pasek nawigacyjny za pomocą komponentu paska nawigacyjnego i stopkę, korzystając z poniższego niestandardowego kodu CSS. Nawigacja i stopka sprawią, że strona będzie kompletna, z której można korzystać niezależnie w dowolnym miejscu.

/* 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 Kompletna strona paralaksy Jumbotron

Pełny kod strony paralaksy Bootstrap 4 jumbotron będzie wyglądał jak poniżej. Możesz go skopiować i używać, zastępując adresy URL obrazów i fikcyjną zawartość własnymi.

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

Strona paralaksy JavaScript

Chociaż powyższy stały obraz CSS wygląda jak paralaksa, tak naprawdę nie jest to efekt paralaksy. W paralaksie obraz tła również powinien poruszać się w stosunku do ruchu treści. Można to zrobić tylko za pomocą JavaScript. Istnieją gotowe biblioteki JavaScript, takie jak jarallax.js, których można użyć do tworzenia sekcji paralaksy o pełnej szerokości. Niestety wyjaśnienie całego procesu będzie tutaj bardziej złożone. Możesz sprawdzić następujące wersje demonstracyjne i pobrać motywy stworzone za pomocą Bootstrap.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów