现代 CSS 以其强大的功能和非凡的特性重新定义了网页开发。CSS 是一款万能的工具，它提供了出色的选项，使网页具有高度的互动性和吸引力。无论是设计的灵活性、快速定制、出色的样式选项，还是先进的用户界面 (UI)——CSS 都能为所有网页开发和样式设计需求提供端到端的解决方案。最重要的是，使用 CSS 和 HTML，您只需编写几行代码即可添加动画和效果，而这在以前使用 JavaScript 是非常费力的。
在本指南中，我们将引导您完成在 Chrome 中使用 CSS 创建视差滚动效果的步骤。
前提条件
要学习本教程，您必须对 HTML 和 CSS 有基本的了解。
步骤 1：创建新项目
让我们首先使用命令行界面创建一个新的项目文件夹和文件。打开终端并输入以下命令以创建一个新的项目文件夹：
|
1 |
mkdir css-parallax |
使用 cd 命令将目录更改为 css-parallax 文件夹：
|
1 |
cd css-parallax |
接下来，在 css-parallax 文件夹中创建一个 HTML 文件，我们将在其中放置所有的 HTML 代码。将文件命名为 index.html 并使用 nano 命令打开它：
|
1 |
nano index.html |
一旦我们的 index.html 文件准备就绪，让我们继续，通过添加引导性的 HTML 代码来构建网页结构。
Step 2: Structure of the Basic HTML
在这一步中，我们将通过添加 HTML 代码来设计我们的网页。在 index.html 文件中添加以下几行代码：
|
1 2 3 4 5 6 7 8 9 |
<!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> |
设置好网页的基本结构后，创建三个 section 类——两个用于背景图片，一个用于静态纯色背景。接下来，在 <body> 标签中：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> ... <main class="wrapper"> <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> |
在 <body> 标签中插入 HTML 代码就完成了我们 html.文件的基本设置。在接下来的步骤中，我们将引入 CSS 并为每个部分定义样式选项。
步骤 3：CSS 简介
让我们通过添加 CSS 文件并创建视差效果来为网站设计样式。首先，在 css-parallax 文件夹，我们将把创建视差滚动效果所需的所有 CSS 代码放在这里。之后，插入一个 styles.css 文件到您的 css-parallax 文件夹中，使用 nano 命令：
|
1 |
nano styles.css |
我们将开始为网页设置样式，首先从 .wrapper 类开始。 .wrapper 类为整个页面设置透视和滚动属性。从 wrapper 类开始，并指定其高度、溢出和透视。将 wrapper 的高度设置为一个恒定值，以便视差滚动效果能够正常工作。在本指南中，我们使用 将视口值设置为100vh 以获取屏幕视口的完整高度。您可以根据您的项目需求修改 vh 值。接下来，通过将 overflow-x 属性设置为 hidden 来禁用屏幕水平滚动条。此外，将 perspective 属性值指定为 3px。让我们在 styles.css 文件类中添加以下几行代码：
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
第 4 步：为 .section 类添加样式
在 wrapper 类旁边，为 .section 类。 .section 类定义了主区域的大小、显示和文本属性。将位置设置为 relative 以使子元素 .parallax::after 与父元素 .section 进行相对定位。保持 view-height(vh)为 100 以获取屏幕视口的完整高度。根据您的需要添加、修改其他参数并设置其样式。
在您的 styles.css 文件中，在 wrapper 类旁边添加以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: red; text-shadow: 0 0 5px #000; } |
接下来，我们将添加一个伪元素并为其设置样式，以创建视差效果并使其生效。
Step 5: Add Styles for the .parallax Class
在这一步中，我们将在 .parallax 上添加一个伪元素。该伪元素将是该元素的最后一个子元素，并将向负责启动视差效果的背景图像添加一个 ::after 伪元素。在代码的前半部分，设置了伪元素的基本显示规范和定位。在后半部分，我们将使用 translateZ() CSS 函数添加 transform 属性，并将其保持为 (-1px)。此外，添加一个 z-index 以控制垂直堆叠。
在 .section 类下方添加以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .section { position: relative; height: 100vh; transform-style: preserve-3d; 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; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
第 6 步：为每个区域添加图像和背景
让我们在静态区域的背景图像 and 背景颜色中添加最终的 CSS 属性。首先为 .static 区域添加纯色背景。将背景颜色设置为 aqua，并在 .parallax::after 类之后添加以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
该 .static 类为没有图像的静态区域添加背景。另外两个带有 .parallax 类的区域具有用于容纳背景图像的唯一类。请分别在 .bg1 和 .bg2 类中添加背景图像的 URL。
在本教程中，我们使用的是来自 Unsplash 的随机图像。你也可以使用来自其他网站的图像，例如 Pixapay, Placekitten、以及 Pexels 等等，并根据你的喜好进行自定义。将以下代码添加到 .static 类中：
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
第 7 步：将 CSS 与 HTML 连接
现在我们已经添加了视差滚动效果的所有代码，让我们将 styles.css 文件与 index.html:
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>视差滚动效果使用 CSS</title> </head> ... |
打开 index.html（我们在 第 2 步 中创建的），并在 Chrome 浏览器中打开：
结论
在本教程中，我们通过基本设置完成了构建一个功能完备的网页的步骤。还有许多其他有趣的选项和自定义选项供你尝试。你可以尝试添加阴影效果、修改图像滚动以及进行其他调整，让你的学习过程充满乐趣和刺激。
要进一步深入了解 Web 开发主题，请查看来自 我们博客:
祝你编程愉快！
评论
暂无评论。发表第一条评论吧。