Jak stworzyć stronę paralaksy o pełnej szerokości za pomocą Bootstrapa?
Zadowolony
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
- Demo strony paralaksy Bootstrap
- Zaczynając od szablonu startowego
- CSS dla efektu paralaksy
- HTML dla sekcji paralaksy
- Dodanie nawigacji i stopki
- 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.
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.
- Motyw nagłówka paralaksy OnePager.
- Web-Boots – kompletny motyw Bootstrap ze stroną paralaksy i wieloma innymi funkcjami.
Źródło nagrywania: webnots.com