如何在 Chrome 中使用纯 CSS 创建视差滚动效果

介绍

现代 CSS 是一种强大的工具，可用于创建许多高级用户界面 (UI) 功能。过去，这些功能依赖于 JavaScript 库。

在本指南中，您将设置几行 CSS 以在网页上创建滚动视差效果。您将使用图像placekitten.com作为占位符背景图像。

完成本教程后，您将拥有一个具有纯 CSS 滚动视差效果的网页。

警告：本文使用了无法跨浏览器工作的实验性 CSS 属性。这个项目已经过测试并且可以在 Chrome 上运行。

由于某些浏览器的优化，此技术在 Firefox、Safari 和 iOS 中效果不佳。

第 1 步 – 创建一个新项目

在这一步中，使用命令行来设置一个新的项目文件夹和文件。首先，打开您的终端并创建一个新的项目文件夹。

键入以下命令以创建项目文件夹：

  • mkdir css-parallax

在本例中，您调用了文件夹css-parallax。现在，切换到css-parallax文件夹：

  • cd css-parallax

接下来，使用以下命令index.html在您的css-parallax文件夹中创建一个文件nano：

  • nano index.html

您将把项目的所有 HTML 放在这个文件中。

在下一步中，您将开始创建网页的结构。

步骤 2 — 设置应用程序结构

在此步骤中，您将添加创建项目结构所需的 HTML。

在您的index.html文件中添加以下代码：

css-视差/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 Scrolling Parallax</title>
  </head>
  <body></body>
</html>

这是大多数使用HTML.

在<body>标签内添加以下代码：

css-视差/index.html
 
<body>
...
   <main>
      <section class="section parallax bg1">
         <h1>Cute Kitten</h1>
      </section>
      <section class="section static">
         <h1>Boring</h1>
      </section>
      <section class="section parallax bg2">
         <h1>Fluffy Kitten</h1>
      </section>
   </main>
...
</body>

此代码创建三个不同的部分。两个将具有背景图像，一个将是静态的纯背景。

在接下来的几个步骤中，您将使用您在HTML.

第 3 步 – 创建 CSS 文件并添加初始 CSS

在此步骤中，您将创建一个CSS文件。然后，您将添加为网站设置样式所需的初始 CSS 并创建视差效果。

首先，使用以下命令styles.css在您的css-parallax文件夹中创建一个文件nano：

  • nano styles.css

您将在此处放置创建视差滚动效果所需的所有 CSS。

接下来，开始.wrapper上课。在您的styles.css文件中添加以下代码：

css-视差/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文件中，在包装类下方添加以下代码：

css-视差/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。

每个部分都有一个view-height(vh)的100占用视口的全高度。可以更改此值并将其设置为您喜欢的每个部分的任何高度。

最后，其余CSS属性用于格式化每个部分内的文本并为其添加样式。它将文本定位在每个部分的中心并添加white.

接下来，您将添加一个伪元素并为其设置样式，以在HTML.

第 5 步 – 为.parallax类添加样式

在此步骤中，您将向类添加样式.parallax。

首先，您将在.parallax要设置样式的类上添加一个伪元素。

注意：您可以访问MDN 网络文档以了解有关 CSS 伪元素的更多信息。

在.section类下面添加以下代码：

css-视差/styles.css
...

.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属性以添加静态部分的背景图像和背景颜色。

首先，.static在.parallax::after类之后使用以下代码为部分添加纯背景色：

css-视差/styles.css
...

.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类添加小猫背景图像。

将以下代码添加到.static类中：

css-视差/styles.css
...

.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网站。这是一项获取小猫照片以用作占位符的服务。

现在添加了视差滚动效果的所有代码，您可以styles.css在index.html.

步骤 7 —在浏览器中链接styles.css和打开index.html

在这一步中，您将链接styles.css文件并在浏览器中打开项目以查看视差滚动效果。

首先，将以下代码添加到文件中的<head>标记中index.html：

css-视差/index.html
 ...
<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.htmlandstyles.css文件设置了一个项目，现在拥有一个功能性网页。您添加了网页结构并为网站上的各个部分创建了样式。

可以将您使用的图像或视差效果放得更远，以便它们移动得更慢。您必须更改像素数量perspective和transform属性。如果您根本不希望背景图像滚动，请使用background-attachment: fixed;代替perspective/translate/scale。

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁