TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

169

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

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

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

Страница CSS Parallax

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

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

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

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

Страница 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="#" 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 Добавление навигации и нижнего колонтитула

Вышеупомянутые блоки кода 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 Parallax

Полный код страницы параллакса 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="#" 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

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

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее