Как создать страницу с параллаксом в полную ширину с помощью Bootstrap?

Jumbotron — один из компонентов Bootstrap, который помогает создавать привлекательные заголовки страниц с кнопкой призыва к действию. Компонент jumbotron по умолчанию имеет светло-серый цвет фона и может быть создан во всю ширину или помещен в контейнер. С незначительной корректировкой CSS вы можете добавить фоновое изображение параллакса к компоненту jumbotron и создать макет страницы параллакса во всю ширину. В этой статье давайте подробнее обсудим, как создать страницу с параллаксом во всю ширину с помощью компонента jumbotron Bootstrap 4.

Как создать страницу с параллаксом в полную ширину с помощью Bootstrap?

  • Страница CSS Parallax
    1. Демонстрация страницы параллакса Bootstrap 4
    2. Начиная со стартового шаблона
    3. CSS для эффекта параллакса
    4. HTML для секций параллакса
    5. Добавление навигации и нижнего колонтитула
    6. Полный код для страницы с параллаксом
  • Страница параллакса JavaScript

Страница CSS Parallax

Сначала давайте объясним страницу параллакса CSS с фиксированным фоном.

1. Демонстрация страницы Bootstrap 4 Parallax с использованием Jumbotron

Раздел параллакса на странице Bootstrap 4 будет выглядеть примерно так, как показано ниже.

Страница Bootstrap 4 Parallax с Jumbotron
Страница Bootstrap 4 Parallax с Jumbotron

2. Начиная со стартового шаблона

Первый шаг — начать со скелетного стартового шаблона Bootstrap. Вы можете использовать ссылки CDN для таблиц стилей и скриптов или разместить их на своем собственном сервере. Давайте возьмем приведенный ниже стартовый шаблон со ссылками на CDN в качестве отправной точки для макета нашей страницы.

<!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 для эффекта параллакса

В нашем разделе параллакса есть фоновое изображение с минимальной высотой 600 пикселей, заголовок h1 и абзац для добавления краткого описания.

Сначала позвольте нам создать секцию параллакса с фиксированным фоновым изображением, вы можете установить минимальную высоту на желаемую высоту.

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

Затем давайте добавим несколько стилей к абзацу и заголовку H1, как показано ниже. Вы можете изменить значения по своему усмотрению.

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

Затем мы добавляем изображение для фона отдельного раздела, мы показали здесь три класса CSS для добавления трех разделов. Вы можете просто добавить «.paralsec3», «.paralsec4» и т. Д., Чтобы добавить различные изображения для дальнейших разделов.

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

Наконец, давайте удалим нижнее поле из компонента jumbotron по умолчанию.

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

Вы можете либо добавить весь CSS внутри тегов

в разделе заголовка начального шаблона, либо создать внешнюю таблицу стилей и ссылку.

4. Создание HTML для параллакс-секций.

Ниже приведен полный HTML-код страницы параллакса с тремя разделами. Мы использовали компонент кнопки по умолчанию в каждом разделе.

<!-- 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="https://www.webnots.com/how-to-create-full-width-parallax-page-with-bootstrap/#" 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 -->

Вышеупомянутые блоки кода CSS и HTML со стартовым шаблоном сделают страницу с параллаксом во всю ширину без навигации и нижнего колонтитула. Добавьте панель навигации, используя компонент панели навигации, и нижний колонтитул, используя приведенный ниже настраиваемый CSS. Навигация и нижний колонтитул сделают страницу законченной, и ее можно будет использовать где угодно независимо.

/* 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. Заполните страницу параллакса Jumbotron.

Полный код страницы параллакса jumbotron в Bootstrap 4 будет выглядеть, как показано ниже. Вы можете скопировать и использовать его, заменив URL-адреса изображений и фиктивный контент своими собственными.

<!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="https://www.webnots.com/how-to-create-full-width-parallax-page-with-bootstrap/#" 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="https://www.webnots.com/how-to-create-full-width-parallax-page-with-bootstrap/#">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

Хотя приведенное выше фиксированное изображение CSS выглядит как параллакс, на самом деле это не эффект параллакса. При параллаксе фоновое изображение также должно перемещаться относительно движения контента. Это можно сделать только с помощью JavaScript. Существуют готовые библиотеки JavaScript, такие как jarallax.js, которые можно использовать для создания секций параллакса полной ширины. К сожалению, здесь будет сложнее объяснить весь процесс. Вы можете посмотреть следующие демонстрации и загрузить темы, созданные с помощью Bootstrap.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.