Учебники

Бутстрап Техника

Сентябрь 2, 2018

Bootstrap — это популярный фреймворк со множеством готовых к использованию компонентов на выбор. Bootstrap может оптимизировать код для реализации параллаксной прокрутки.

В этой главе давайте обсудим с примером, как мы собираемся использовать компонент Jumbotron для реализации параллаксной прокрутки.

Полная параллаксная страница с Bootstrap4 Jumbotron

Представьте себе веб-сайт, на котором пользователя показывают с большим полем «призыв к действию» с некоторым содержанием, касающимся скидки или продажи. Обычно Jumbotron находит свое применение в таких местах. Это большая коробка, полезная для привлечения внимания пользователя.

Поскольку мы используем только один компонент Bootstrap, мы не будем создавать отдельный файл CSS для этого примера. Давайте погрузимся прямо в код HTML. 

<!DOCTYPE html>  
<html lang = "en">  
   <head>  
      <meta charset = "utf-8">  
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> 
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
         integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
         crossorigin = "anonymous">  
      
      <style>  
         .jumbotron{  
            margin:15px 30px 0px 30px;  
            border-radius:10px;  
            background:   
            linear-gradient(
               rgba(0, 0, 250, 0.25), 
               rgba(125, 250, 250, 0.45)),
               url(img/ruin.jpg);  
            
            background-repeat: no-repeat;  
            background-attachment: fixed;  
            color:white !important;  
            height:440px;  
         }  
         .page-scroll {
            height:5000px;  
         }  
         .lead {
            font-family:raleway;  
            font-weight:100;  
            margin-top:-10px;  
         }  
      </style>  
   </head>  
   
   <body>  
      <div class = "jumbotron jumbotron-fluid">  
         <div class = "container">  
            <h1 class = "display-2">Jumbotron Example</h1>  
            <p class = "lead">Example text for parallax using jumbotron</p>  
         </div>  
      </div>  
      <div class = "page-scroll"> </div>  
   </body>
   
</html>

Анализ кода

Строка 6 ссылается на библиотеку Bootstrap 4. Мы указываем границы и радиус границы для jumbotron от линии 8 до 11 .

Как мы видим в строке 33 , мы создаем div с классом jumbotron, чтобы показать большую рамку, в которую будет загружено наше конкретное изображение. Обратите внимание, что на этот раз нет прямого URL для изображения, мы собираемся использовать загруженное изображение. Вы можете загрузить любое изображение с высоким разрешением для вашего примера и указать его в строке 16 .

Вывод, который вы видите при выполнении приведенного выше кода, показан ниже —

47
Share: