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

最新推荐文章于 2024-05-07 21:40:45 发布

cukw6666

最新推荐文章于 2024-05-07 21:40:45 发布

阅读量598

点赞数

文章标签： html css java js html5 ViewUI

原文链接：https://www.digitalocean.com/community/tutorials/css-pure-css-parallax

版权

前端视差滚动效果

介绍 (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 as placeholder background images.

在本指南中，您将设置一些CSS行以在网页上创建滚动视差效果。您将使用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文档以了解有关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网站。它是一种用于获取小猫图片以用作占位符的服务。

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存储库以查看完整代码。

结论 (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

前端视差滚动效果

cukw6666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端视差滚动效果_如何在Chrome中使用纯CSS创建视差滚动效果

前端视差滚动效果介绍 (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是一个功能强大的工...
复制链接

扫一扫