介绍
现代 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
。