本文主要是介绍如何在 Chrome 中使用纯 CSS 创建视差滚动效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
介绍
现代 CSS 是一个强大的工具，您可以使用它来创建许多高级用户界面（UI）功能。在过去，这些功能依赖于 JavaScript 库。
在本指南中，您将设置一些 CSS 行来在网页上创建一个滚动视差效果。您将使用 placekitten.com 上的图片作为占位符背景图像。
完成本教程后，您将拥有一个具有纯 CSS 滚动视差效果的网页。
步骤 1 —— 创建一个新项目
在这一步中，使用命令行来设置一个新的项目文件夹和文件。首先，打开您的终端并创建一个新的项目文件夹。
输入以下命令来创建项目文件夹：
mkdir css-parallax
在这种情况下，您将文件夹命名为 css-parallax。现在，切换到 css-parallax 文件夹：
cd css-parallax
接下来，在 css-parallax 文件夹中使用 nano 命令创建一个 index.html 文件：
nano index.html
您将把项目的所有 HTML 放入这个文件中。
在下一步中，您将开始创建网页的结构。
步骤 2 —— 设置应用程序结构
在这一步中，您将添加所需的 HTML 代码来创建项目的结构。
在您的 index.html 文件中添加以下代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS 滚动视差</title></head><body></body>
</html>
这是大多数使用 HTML 的网页的基本结构。
在 <body> 标签内添加以下代码：
<body>
...<main><section class="section parallax bg1"><h1>可爱的小猫</h1></section><section class="section static"><h1>无聊</h1></section><section class="section parallax bg2"><h1>蓬松的小猫</h1></section></main>
...
</body>这段代码创建了三个不同的部分。其中两个将具有背景图像，另一个将是静态的，纯色背景。
在接下来的几步中，您将使用您在 HTML 中添加的类来为每个部分添加样式。
步骤 3 —— 创建一个 CSS 文件并添加初始 CSS
在这一步中，您将创建一个 CSS 文件。然后，您将添加所需的初始 CSS 来为网站添加样式并创建视差效果。
首先，在您的 css-parallax 文件夹中使用 nano 命令创建一个 styles.css 文件：
nano styles.css
这是您将放置所有创建视差滚动效果所需的 CSS 的地方。
接下来，从 .wrapper 类开始。在您的 styles.css 文件中添加以下代码：
.wrapper {height: 100vh;overflow-x: hidden;overflow-y: auto;perspective: 2px;
}
.wrapper 类设置了整个页面的透视和滚动属性。
为了使效果生效，需要将包装器的高度设置为固定值。您可以使用视口单位 vh 设置为 100 来获得屏幕视口的完整高度。
当您缩放图像时，它们将在屏幕上添加一个水平滚动条，因此您可以通过添加 overflow-x: hidden; 来禁用它。perspective 属性模拟了从视口到您将在 CSS 中进一步创建和转换的伪元素的距离。
在下一步中，您将添加更多 CSS 来为您的网页添加样式。
步骤 4 —— 为 .section 类添加样式
在这一步中，您将为 .section 类添加样式。
在您的 styles.css 文件中，在包装器类下面添加以下代码：
.wrapper {height: 100vh;overflow-x: hidden;perspective: 2px;
}
.section { position: relative;height: 100vh;display: flex;align-items: center;justify-content: center;color: white;text-shadow: 0 0 5px #000;
}
.section 类定义了主要部分的大小、显示和文本属性。
将位置设置为 relative，以便子元素 .parallax::after 可以相对于父元素 .section 进行绝对定位。
每个部分的 视口高度（vh） 都设置为 100，以占据视口的完整高度。这个值可以根据您喜欢的每个部分的高度进行更改和设置。
最后，剩余的 CSS 属性用于格式化和为每个部分内的文本添加样式。它将文本定位在每个部分的中心，并添加了白色的颜色。
接下来，您将添加一个伪元素并对其进行样式设置，以在您的 HTML 中为两个部分创建视差效果。
步骤 5 — 为 .parallax 类添加样式
在这一步中，您将为 .parallax 类添加样式。
首先，您将在 .parallax 类上添加一个伪元素进行样式设置。
在 .section 类下面添加以下代码：
....section {position: relative;height: 100vh;display: flex;align-items: center;justify-content: center;color: white;text-shadow: 0 0 5px #000;
}.parallax::after {content: " ";position: absolute;top: 0;right: 0;bottom: 0;left: 0;transform: translateZ(-1px) scale(1.5);background-size: 100%;z-index: -1;
}
...
.parallax 类添加了一个 ::after 伪元素到背景图像，并提供了视差效果所需的变换。
伪元素是带有 .parallax 类的元素的最后一个子元素。
代码的前半部分显示并定位了伪元素。transform 属性将伪元素移动到 z-index 上远离相机，然后将其缩放以填充视口。
由于伪元素更远，它看起来移动得更慢。
在下一步中，您将添加背景图像和静态背景样式。
步骤 6 — 为每个部分添加图像和背景
在这一步中，您将添加最终的 CSS 属性，以添加背景图像和静态部分的背景颜色。
首先，在 .parallax::after 类后面添加以下代码，为 .static 部分添加纯色背景：
....parallax::after {content: " ";position: absolute;top: 0;right: 0;bottom: 0;left: 0;transform: translateZ(-1px) scale(1.5);background-size: 100%;z-index: -1;
}.static {background: red;
}
...
.static 类为没有图像的静态部分添加了背景。
.parallax 类的两个部分还有一个不同的额外类。使用 .bg1 和 .bg2 类来添加 Kitten 背景图像。
将以下代码添加到 .static 类：
....static {background: red;
}
.bg1::after {background-image: url('https://placekitten.com/g/900/700');
}.bg2::after {background-image: url('https://placekitten.com/g/800/600');
}...
.bg1, .bg2 类为每个部分添加了相应的背景图像。
这些图像来自 placekitten 网站。这是一个用于获取小猫图片作为占位符的服务。
现在，所有视差滚动效果的代码都已添加，您可以在 index.html 中链接到您的 styles.css 文件。
步骤 7 — 链接 styles.css 并在浏览器中打开 index.html
在这一步中，您将链接您的 styles.css 文件，并在浏览器中打开项目，以查看视差滚动效果。
首先，在 index.html 文件的 <head> 标签中添加以下代码：
...<head><meta charset="UTF-8" /><link rel="stylesheet" href="styles.css" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS Parallax</title>
</head>...
现在，您可以在浏览器中打开您的 index.html 文件：
!滚动视差效果 gif
通过这样做，您已经设置了一个具有滚动效果的网页。查看此 GitHub 存储库以查看完整的代码。
结论
在本文中，您使用 index.html 和 styles.css 文件设置了一个项目，并且现在有了一个功能性的网页。您添加了网页的结构，并为网站上的各个部分创建了样式。
可以将您使用的图像或视差效果放得更远，以便它们移动得更慢。您将不得不更改 perspective 和 transform 属性上的像素数量。如果您不希望背景图像滚动，可以使用 background-attachment: fixed; 而不是 perspective/translate/scale。
这篇关于如何在 Chrome 中使用纯 CSS 创建视差滚动效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
