首页 前端知识 如何在 Chrome 中使用纯 CSS 创建视差滚动效果

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

2024-03-11 10:03:14 前端知识 前端哥 62 363 我要收藏

介绍

现代 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.htmlstyles.css 文件设置了一个项目,并且现在有了一个功能性的网页。您添加了网页的结构,并为网站上的各个部分创建了样式。

可以将您使用的图像或视差效果放得更远,以便它们移动得更慢。您将不得不更改 perspectivetransform 属性上的像素数量。如果您不希望背景图像滚动,可以使用 background-attachment: fixed; 而不是 perspective/translate/scale

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3586.html
标签
chrome
评论
会员中心 联系我 留言建议 回顶部
复制成功!