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

Як створити сторінку Паралакс на всю ширину за допомогою Bootstrap?

6

Jumbotron – один із компонентів Bootstrap, який допомагає створювати привабливі заголовки сторінок за допомогою кнопки заклику до дії. Компонент jumbotron за замовчуванням має світло -сірий колірний фон і його можна створити на всю ширину або вмістити в контейнер. За допомогою незначного налаштування CSS ви можете додати фонове зображення паралаксу до компонента jumbotron і створити макет сторінки на всю ширину паралаксу. У цій статті давайте детальніше обговоримо, як створити паралакс -сторінку на всю ширину з компонентом Bootstrap jumbotron. Ми використовуємо CSS версії 4, проте ви також можете використовувати останню версію.

Як створити сторінку Паралакс на всю ширину за допомогою Bootstrap?

  • Паралельна сторінка CSS
    1. Демо -сторінка паралакс -сторінки Bootstrap
    2. Починаючи з шаблону початківця
    3. CSS для ефекту паралаксу
    4. HTML для параллаксних розділів
    5. Додавання навігації та нижнього колонтитула
    6. Повний код сторінки паралакс
  • Паралельна сторінка JavaScript

Паралельна сторінка CSS

Спочатку пояснимо сторінку паралаксу CSS з фіксованим фоном.

1 Демонстрація сторінки Bootstrap Parallax за допомогою Jumbotron

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

Як створити сторінку Паралакс на всю ширину за допомогою Bootstrap?

Bootstrap 4 Parallax Page з Jumbotron

2 Початок із шаблону початківця

Перший крок – почати зі скелетного шаблону початкового завантаження. Ви можете використовувати посилання 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

Повний код сторінки паралакса Bootstrap 4 jumbotron буде виглядати так, як показано нижче. Ви можете скопіювати та використовувати його, замінивши 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
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі