Bootstrap 技术
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 库。我们从第 8 行到第 11 行指定了 jumbotron 的边距和边框半径。
正如我们在第 33 行看到的，我们创建了一个带有 jumbotron 类的 div 来显示一个大框，我们将在其中加载特定的图像。请注意，这次没有图像的直接 URL，我们将使用下载的图像。您可以下载任何高分辨率图像作为示例，并在第 16 行中指定它。
执行上述代码时可以看到的输出如下所示 −
