本文共 10628 字,大约阅读时间需要 35 分钟。
前端 视差滚动效果
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 as placeholder background images.
在本指南中,您将设置一些CSS行以在网页上创建滚动视差效果。 您将使用中的图像作为占位符背景图像。
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中效果不佳。
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
文件:
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.
在下一步中,您将开始创建网页的结构。
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 Scrolling Parallax
This is the basic structure of most webpages that use HTML
.
这是大多数使用HTML
网页的基本结构。
Add the following code inside the <body>
tag:
在<body>
标记内添加以下代码:
...... Cute Kitten
Boring
Fluffy Kitten
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
添加的类为每个部分添加样式。
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
文件:
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
文件中,添加以下代码:
.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来设置网页样式。
.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
文件内,在包装器类下面添加以下代码:
.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
两个部分上创建视差效果。
.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 to learn more about CSS pseudo-elements.
注意:您可以访问以了解有关CSS伪元素的更多信息。
Add the following code below the .section
class:
在.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;}...
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.
在下一步中,您将添加背景图像和静态背景样式。
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
部分添加纯色:
....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
类:
....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 website. It is a service for getting pictures of kittens for use as placeholders.
这些图像来自网站。 它是一种用于获取小猫图片以用作占位符的服务。
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
文件。
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 ...
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 to see the full code.
这样,您就可以建立具有滚动效果的功能网页。 查看以查看完整代码。
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
。
翻译自:
前端 视差滚动效果
转载地址:http://isegb.baihongyu.com/