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

末蓝、 2022-11-28 15:21 210阅读 0赞

前端 视差滚动效果

### 介绍 **(**Introduction**)** ###

Modern CSS is a powerful tool you can use to create many advanced User Interface (UI) features. In the past, these features relied on JavaScript libraries.

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

In this guide, you will set up a few CSS lines to create a *scrolling parallax* effect on a web page. You will use images from [`placekitten.com`][placekitten.com] as placeholder background images.

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

You will have a webpage with a pure CSS scrolling parallax effect once you’ve completed the tutorial.

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

**Warning**: This article uses experimental CSS properties that do not work across browsers. This project has been tested and works on Chrome. This technique doesn’t work well in Firefox, Safari, and iOS due to some of those browsers’ optimizations.

**警告** ：本文使用的实验CSS属性无法在所有浏览器上使用。 该项目已经过测试，可以在Chrome上运行。 由于某些浏览器的优化，因此该技术在Firefox，Safari和iOS中效果不佳。

## 第1步-创建一个新项目 **(**Step 1 — Creating a New Project**)** ##

In this step, use the command line to set up a new project folder and files. To start, open your terminal and create a new project folder.

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

Type the following command to create the project folder:

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

*  mkdir css-parallax
    
    mkdir css-视差

In this case, you called the folder `css-parallax`. Now, change into the `css-parallax` folder:

在这种情况下，您将文件夹命名为`css-parallax` 。 现在，进入`css-parallax`文件夹：

*  cd css-parallax
    
    cd css视差

Next, create an `index.html` file in your `css-parallax` folder with the `nano` command:

接下来，使用`nano`命令在`css-parallax`文件夹中创建`index.html`文件：

*  nano index.html
    
    纳米index.html

You will put all the HTML for the project in this file.

您将把项目的所有HTML放入此文件中。

In the next step, you will start creating the structure of the webpage.

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

## 步骤2 —设置应用程序结构 **(**Step 2 — Setting Up the Application Structure**)** ##

In this step, you will add the HTML needed to create the structure of the project.

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

Inside your `index.html` file add the following code:

在`index.html`文件中，添加以下代码：

css-parallax/index.html

css-parallax / 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>

This is the basic structure of most webpages that use `HTML`.

这是大多数使用`HTML`网页的基本结构。

Add the following code inside the `<body>` tag:

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

css-parallax/index.html

css-parallax / 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>

This code creates three different sections. Two will have a background image, and one will be a static, plain background.

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

In the next few steps, you will add the styles for each section using the classes you added in the `HTML`.

在接下来的几个步骤中，您将使用在`HTML`添加的类为每个部分添加样式。

## 第3步-创建CSS文件并添加初始CSS **(**Step 3 — Creating a CSS File and Adding Initial CSS**)** ##

In this step, you will create a `CSS` file. Then you will add in the initial CSS needed to style the website and create the parallax effect.

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

First, create a `styles.css` file in your `css-parallax` folder with the `nano` command:

首先，使用`nano`命令在`css-parallax`文件夹`styles.css`创建一个`styles.css`文件：

*  nano styles.css
    
    纳米样式

This is where you will put all of the CSS needed to create the parallax scrolling effect.

在这里，您将放置创建视差滚动效果所需的所有CSS。

Next, start with the `.wrapper` class. Inside your `styles.css` file add the following code:

接下来，从`.wrapper`类开始。 在`styles.css`文件中，添加以下代码：

css-parallax/styles.css

css-parallax / styles.css

.wrapper {
      height: 100vh;
      overflow-x: hidden;
      overflow-y: auto;
      perspective: 2px;
    }

The `.wrapper` class sets the perspective and scroll properties for the whole page.

`.wrapper`类为整个页面设置透视图和滚动属性。

The height of the wrapper needs to be set to a fixed value for the effect to work. You can use the viewport unit `vh` set to `100` to get the full height of the screen’s viewport.

包装的高度需要设置为固定值才能起作用。 您可以将视口单位`vh`设置为`100`以获取屏幕视口的完整高度。

When you scale the images, they will add a horizontal scrollbar to the screen, so you can disable it by adding `overflow-x: hidden;`. The `perspective` property simulates the distance from the viewport to the pseudo-elements you will create and transform further down in the `CSS`.

缩放图像时，它们将在屏幕上添加水平滚动条，因此您可以通过添加`overflow-x: hidden;`来禁用它`overflow-x: hidden;` 。 `perspective`属性模拟了从视口到将要创建并在`CSS`进一步转换的伪元素的距离。

In the next step, you will add more CSS to style your webpage.

在下一步中，您将添加更多CSS来设置网页样式。

## 第4步-为`.section`类添加样式 **(**Step 4 — Adding Styles for the `.section` Class**)** ##

In this step, you will add styles to the `.section` class.

在此步骤中，您将样式添加到`.section`类。

Inside your `styles.css` file add the following code below the wrapper class:

在`styles.css`文件内，在包装器类下面添加以下代码：

css-parallax/styles.css

css-parallax / 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;
    }

The `.section` class defines the size, display, and text properties for the main sections.

`.section`类定义主要部分的大小，显示和文本属性。

Set a position of `relative` so that the child, `.parallax::after` can be absolutely positioned relative to the parent element `.section`.

设置`relative`位置，以便子`.parallax::after`可以相对于父元素`.section`绝对定位。

Each section has a `view-height(vh)` of `100` to take up the viewport’s full height. This value can be changed and set to whatever height you prefer for each section.

每个部分的`view-height(vh)`为`100`以占据视口的整个高度。 可以更改此值并将其设置为您希望每个部分的高度。

Finally, the remainder `CSS` properties are used to format and add styling to the text inside each section. It positions the text in the center of each section and adds a color of `white`.

最后，其余的`CSS`属性用于设置格式并在每个部分的文本中添加样式。 它将文本放置在每个部分的中心，并添加`white` 。

Next, you will add a pseudo-element and style it to create the parallax effect on two of the sections in your `HTML`.

接下来，您将添加一个伪元素并设置其样式以在`HTML`两个部分上创建视差效果。

## 步骤5 —为`.parallax`类添加样式 **(**Step 5 — Adding Styles for the `.parallax` Class**)** ##

In this step, you will add the styles to the `.parallax` class.

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

First, you will add a pseudo-element on the `.parallax` class to be styled.

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

**Note:** You can visit [MDN web docs][] to learn more about CSS pseudo-elements.

**注意：**您可以访问[MDN Web文档][MDN web docs]以了解有关CSS伪元素的更多信息。

Add the following code below the `.section` class:

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

css-parallax/styles.css

css-parallax / 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;
    }
    ...

The`.parallax` class adds an `::after` pseudo-element to the background image and provides the transforms needed for the parallax effect.

`.parallax`类将`::after`伪元素添加到背景图像，并提供视差效果所需的转换。

The pseudo-element is the last child of the element with the class `.parallax`.

伪元素是`.parallax`类的元素的最后一个子元素。

The first half of the code displays and positions the psuedo-element. The `transform` property moves the pseudo-element back away from the camera on the `z-index`, then scales it back up to fill the viewport.

该代码的前半部分显示并定位伪元素。 `transform`属性将伪元素从`z-index`上的摄影机移回，然后将其向上缩放以填充视口。

Because the pseudo-element is further away, it appears to move more slowly.

因为伪元素距离较远，所以它似乎移动得更慢。

In the next step, you will add in the background images and static background style.

在下一步中，您将添加背景图像和静态背景样式。

## 第6步—为每个部分添加图像和背景 **(**Step 6 — Adding the Images and Background For Each Section**)** ##

In this step, you will add the final `CSS` properties to add in the background images and background color of the static section.

在此步骤中，您将添加最终的`CSS`属性，以添加静态部分的背景图片和背景颜色。

First, add a solid background color to the `.static` section with the following code after the `.parallax::after` class:

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

css-parallax/styles.css

css-parallax / 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;
    }
    ...

The `.static` class adds a background to the static section that does not have an image.

`.static`类将背景添加到没有图像的静态部分。

The two sections with the `.parallax` class also have an extra class that is different for each. Use the `.bg1` and `.bg2` classes to add the Kitten background images.

`.parallax`类的两个部分还具有一个额外的类，每个类都不相同。 使用`.bg1`和`.bg2`类添加小猫背景图像。

Add the following code to the `.static` class:

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

css-parallax/styles.css

css-parallax / 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');
    }
    
    ...

The `.bg1, .bg2` classes add the respective background images for each section.

`.bg1, .bg2`类为每个部分添加相应的背景图像。

The images are from the [placekitten][] website. It is a service for getting pictures of kittens for use as placeholders.

这些图像来自[Placekitten][placekitten]网站。 它是一种用于获取小猫图片以用作占位符的服务。

Now that all of the code for the parallax scrolling effect is added, you can link to your `styles.css` file in your `index.html`.

现在，已添加了所有用于视差滚动效果的代码，您可以在`index.html` `styles.css`链接到您的`styles.css`文件。

## 第7步-在浏览器中链接`styles.css`和Opening `index.html` **(**Step 7 — Linking `styles.css` and Opening `index.html` in Your Browser**)** ##

In this step, you will link your `styles.css` file and open up the project in your browser to see the parallax scrolling effect.

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

First, add the following code to the `<head>` tag in the `index.html` file:

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

css-parallax/index.html

css-parallax / 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>
    
    ...

Now, you can open your `index.html` file in your browser:

现在，您可以在浏览器中打开`index.html`文件：

With that, you have set up a functioning webpage with a scrolling effect. Check out [this GitHub repository][] to see the full code.

这样，您就可以建立具有滚动效果的功能网页。 查看[此GitHub存储库][this GitHub repository]以查看完整代码。

## 结论 **(**Conclusion**)** ##

In this article, you set up a project with an `index.html` and `styles.css` file and now have a functional webpage. You added in the structure of your webpage and created styles for the various sections on the site.

在本文中，您使用`index.html`和`styles.css`文件设置了一个项目，现在有了一个功能正常的网页。 您添加了网页的结构，并为网站的各个部分创建了样式。

It’s possible to put the images you use or the parallax effect further away so that they move more slowly. You’ll have to change the pixel amount on `perspective` and the `transform` properties. If you don’t want a background image to scroll at all, use `background-attachment: fixed;` instead of `perspective/translate/scale`.

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

> 翻译自: [https://www.digitalocean.com/community/tutorials/css-pure-css-parallax][https_www.digitalocean.com_community_tutorials_css-pure-css-parallax]

前端 视差滚动效果

[placekitten.com]: http://placekitten.com/
[MDN web docs]: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
[placekitten]: https://placekitten.com/
[this GitHub repository]: https://github.com/do-community/css-parallax-scrolling-chrome/tree/master
[https_www.digitalocean.com_community_tutorials_css-pure-css-parallax]: https://www.digitalocean.com/community/tutorials/css-pure-css-parallax