简介
现代的CSS是一个强大的工具，您可以使用它来创建许多高级用户界面(UI)功能。在过去，这些功能依赖于JavaScript库。
在本指南中，您将设置几个CSS行来在网页上创建_滚动视差_效果。您将使用来自Placekitten.com)的图片作为占位符背景图片。
完成本教程后，您将拥有一个具有纯css滚动视差效果的网页。
<$>[警告] 警告 ：本文使用的是实验性的CSS属性，不能跨浏览器工作。这个项目已经过测试，可以在Chrome上运行。 由于某些浏览器的优化，这种技术在Firefox、Safari和iOS中并不好用。 <$>
第一步-创建新项目
在此步骤中，使用命令行设置新的项目文件夹和文件。首先，打开您的终端并创建一个新的项目文件夹。
键入以下命令以创建项目文件夹：
1mkdir css-parallax
在本例中，您将文件夹命名为css-parallax。现在，切换到css-parallax文件夹：
1cd css-parallax
接下来，使用nan命令在您的css-parallax文件夹中创建index.html文件：
1nano index.html
您将把该项目的所有HTML放在该文件中。
在下一步中，您将开始创建网页的结构。
第二步-设置应用结构
在本步骤中，您将添加创建项目结构所需的HTML。
在index.html文件中添加以下代码：
1[label css-parallax/index.html]
2
3<!DOCTYPE html>
4<html lang="en">
5 <head>
6 <meta charset="UTF-8" />
7 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8 <title>CSS Scrolling Parallax</title>
9 </head>
10 <body></body>
11</html>
这是大多数使用HTML的网页的基本结构。
在 标签中添加以下代码
1[label css-parallax/index.html]
2
3<body>
4...
5 <main>
6 <section class="section parallax bg1">
7 <h1>Cute Kitten</h1>
8 </section>
9 <section class="section static">
10 <h1>Boring</h1>
11 </section>
12 <section class="section parallax bg2">
13 <h1>Fluffy Kitten</h1>
14 </section>
15 </main>
16...
17</body>
这段代码创建了三个不同的部分。其中两个将具有背景图像，一个将是静态的纯背景。
在接下来的几个步骤中，您将使用在HTML中添加的类为每个部分添加样式。
第三步-创建css文件并添加初始css
在本步骤中，您将创建一个CSS文件。然后，您将添加所需的初始css样式的网站和创建视差效果。
首先，使用nan命令在您的css-parallax文件夹中创建一个style es.css文件：
1nano styles.css
这是您将放置创建视差滚动效果所需的所有CSS的位置。
接下来，从.wrapper类开始。在您的style es.css文件中添加以下代码：
1[label css-parallax/styles.css]
2.wrapper {
3 height: 100vh;
4 overflow-x: hidden;
5 overflow-y: auto;
6 perspective: 2px;
7}
.wrapper类设置整个页面的透视和滚动属性。
需要将包装的高度设置为固定值，才能使效果生效。您可以使用设置为100的视区单位vh来获取屏幕视区的全高。
当你缩放图片时，他们会在屏幕上添加一个水平滚动条，所以你可以通过添加overflow-x：idden；来禁用它。perspective属性模拟从视区到您将在CSS中进一步创建和变换的伪元素的距离。
在下一步中，您将添加更多的CSS来设置网页的样式。
第四步-添加.section类的样式
在本步骤中，您将向.section类添加样式。
在styles.css文件中，在包装器类下面添加以下代码：
1[label css-parallax/styles.css]
2
3.wrapper {
4 height: 100vh;
5 overflow-x: hidden;
6 perspective: 2px;
7}
8.section {
9 position: relative;
10 height: 100vh;
11 display: flex;
12 align-items: center;
13 justify-content: center;
14 color: white;
15 text-shadow: 0 0 5px #000;
16}
.section类定义主要部分的大小、显示和文本属性。
将位置设置为relative，以便子元素.parallax：：after可以相对于父元素.section进行绝对定位。
每个部分的view-Height(VH)都是`100‘，以占据整个视区的高度。可以更改此值，并将其设置为您喜欢的每个部分的高度。
最后，剩余的CSS属性用于格式化每个部分中的文本并添加样式。它将文本放置在每个部分的中心，并添加了`白色‘的颜色。
接下来，您将添加一个伪元素并对其进行样式设置，以在HTML中的两个部分上创建视差效果。
第五步-添加.parallax类的样式
在本步骤中，您将把样式添加到.parallax类中。
首先，在要设置样式的.parallax类上添加一个伪元素。
<$>[备注] 注意： 您可以访问MDN Web docs]了解更多关于css伪元素的信息。 <$>
在.section类下面添加以下代码：
1[label css-parallax/styles.css]
2...
3
4.section {
5 position: relative;
6 height: 100vh;
7 display: flex;
8 align-items: center;
9 justify-content: center;
10 color: white;
11 text-shadow: 0 0 5px #000;
12}
13
14.parallax::after {
15 content: " ";
16 position: absolute;
17 top: 0;
18 right: 0;
19 bottom: 0;
20 left: 0;
21 transform: translateZ(-1px) scale(1.5);
22 background-size: 100%;
23 z-index: -1;
24}
25...
.parallax类将：：After伪元素添加到背景图片中，并提供视差效果所需的变换。
伪元素是具有.parallax类的元素的最后一个子元素。
代码的前半部分显示并定位psuedo-元素。former属性将伪元素从Z索引上的相机移回，然后将其放大以填充视区。
由于伪元素距离更远，它的移动速度似乎更慢。
在下一步中，您将添加背景图像和静态背景样式。
Step 6-添加每个片段的图片和背景
在本步骤中，您将添加最终的CSS属性，以添加到静态部分的背景图片和背景颜色中。
首先，在.parallax：：After类之后，使用以下代码向.static部分添加纯色背景：
1[label css-parallax/styles.css]
2...
3
4.parallax::after {
5 content: " ";
6 position: absolute;
7 top: 0;
8 right: 0;
9 bottom: 0;
10 left: 0;
11 transform: translateZ(-1px) scale(1.5);
12 background-size: 100%;
13 z-index: -1;
14}
15
16.static {
17 background: red;
18}
19...
.static类将背景添加到没有图像的静态部分。
带有.parallax类的两个部分还有一个额外的类，每个部分的类是不同的。使用.bg1和.bg2类添加Kitten背景图片。
将以下代码添加到.static类中：
1[label css-parallax/styles.css]
2...
3
4.static {
5 background: red;
6}
7.bg1::after {
8 background-image: url('https://placekitten.com/g/900/700');
9}
10
11.bg2::after {
12 background-image: url('https://placekitten.com/g/800/600');
13}
14
15...
.bg1，.bg2类为每个片段添加各自的背景图片。
图片来自Placekitten网站。这是一项获取小猫照片作为占位符的服务。
现在已经添加了视差滚动效果的所有代码，您可以链接到index.html中的style es.css文件。
Step 7-在浏览器中链接style es.css并打开index.html
在这一步中，你将链接你的styles.css文件，并在浏览器中打开项目，以查看视差滚动效果。
首先，在index.html文件的<head>标签中添加如下代码：
1[label css-parallax/index.html] ...
2
3<head>
4 <meta charset="UTF-8" />
5
6 <link rel="stylesheet" href="styles.css" />
7
8 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9 <title>CSS Parallax</title>
10</head>
11
12...
现在，您可以在浏览器中打开index.html文件：
这样，您就设置了一个具有滚动效果的正常运行的网页。查看这个GitHub repository查看完整代码。
结论
在本文中，您使用index.html和style es.css文件设置了一个项目，现在就有了一个功能强大的网页。您添加了网页的结构，并为站点上的各个部分创建了样式。
可以把你使用的图像或视差效果放得更远，这样它们就会移动得更慢。您必须更改perspective和form属性上的像素量。如果您根本不想让背景图片滚动，可以使用后台-附件：FIXED；，而不是透视图/平移/缩放。