引导技术

Bootstrap 是一个流行的框架，有许多现成的组件可供选择。Bootstrap可以优化实现视差滚动的代码。

在本章中，我们将通过一个示例来讨论如何使用 Jumbotron 组件来实现视差滚动。

带 Bootstrap4 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 库。我们指定从第 8 行到第 11行的大屏幕的边距和边框半径。

正如我们在第 33 行看到的，我们正在创建一个带有 jumbotron 类的 div 来显示我们将在其中加载特定图像的大框。请注意，这次图像没有直接的 URL，我们将使用下载的图像。您可以为您的示例下载任何高分辨率图像并在第 16 行中指定它。

执行上述给定代码时可以看到的输出如下所示 -

大屏幕示例