视差滚动_视差滚动教程

视差滚动

As you probably know, Parallax is a visual effect, where positions of objects look differently when we view them from different positions. The parallax scrolling creates the illusion that the two objects that are in line of sight, but at a distance from each other, moving at different speeds. This effect we can see everywhere when we in the movement: when we go along the street, we see that all nearest things move much faster than distant things, when we drive a car we can see that the trees and shrubs near the road sweep very quickly, and the rear landscape, such as mountains, moving very slowly. This effect is Parallax motion.

如您所知，视差是一种视觉效果，当我们从不同位置查看对象时，它们的位置看起来会有所不同。 视差滚动会产生一种幻觉，即视线中但彼此相距一定距离的两个对象以不同的速度移动。 当我们在运动中时，到处都可以看到这种效果：当我们沿着街道行驶时，我们看到所有最近的事物的移动都比遥远的事物快得多，当我们开车时，我们可以看到道路附近的树木和灌木丛非常清扫很快，后方的景观(如山脉)移动非常缓慢。 此效果是视差运动。

This effect can be applied to web pages: we can apply the parallax effect to blocks that contain background images and some internal content. When we scroll the page, the content is scrolling, but the background should stay in place. CSS will help us to create this effect.

此效果可以应用于网页：我们可以将视差效果应用于包含背景图像和某些内部内容的块。 当我们滚动页面时，内容在滚动，但是背景应该保留在原处。 CSS将帮助我们创造这种效果。

步骤1 – HTML (Step 1 – HTML)

<section class="section parallax parallax-1">
  <div class="container">
    <h1>Section 1</h1>
  </div>
</section>
<section class="section content">
  <div class="container">
    <h2>Simple title 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus id nunc ut gravida. Vestibulum ac...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</section>
<section class="section parallax parallax-2">
  <div class="container">
    <h1>Section 2</h1>
  </div>
</section>
<section class="section content">
  <div class="container">
    <h2>Simple title 2</h2>
    <p>Nam imperdiet posuere bibendum. Aliquam nec consectetur metus. Aliquam egestas a elit at malesuada...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</section>
<section class="section parallax parallax-3">
  <div class="container">
    <h1>Section 3</h1>
  </div>
</section>
<section class="section content">
  <div class="container">
    <h2>Simple title 3</h2>
    <p>Proin tempor urna vitae tortor porttitor, ac malesuada elit lacinia. Nulla ac tellus nulla. Donec iaculis...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</section>

<section class="section parallax parallax-1">
  <div class="container">
    <h1>Section 1</h1>
  </div>
</section>
<section class="section content">
  <div class="container">
    <h2>Simple title 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus id nunc ut gravida. Vestibulum ac...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</section>
<section class="section parallax parallax-2">
  <div class="container">
    <h1>Section 2</h1>
  </div>
</section>
<section class="section content">
  <div class="container">
    <h2>Simple title 2</h2>
    <p>Nam imperdiet posuere bibendum. Aliquam nec consectetur metus. Aliquam egestas a elit at malesuada...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</section>
<section class="section parallax parallax-3">
  <div class="container">
    <h1>Section 3</h1>
  </div>
</section>
<section class="section content">
  <div class="container">
    <h2>Simple title 3</h2>
    <p>Proin tempor urna vitae tortor porttitor, ac malesuada elit lacinia. Nulla ac tellus nulla. Donec iaculis...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</section>

As you can see, the html markup doesn’t seem complex. Here are 6 alternate sections: three of them contain background images (sections with class parallax), three contain some dummy text (sections with class content).

如您所见，html标记似乎并不复杂。 这里有6个备用部分：其中三个包含背景图像(类parallax部分)，三个包含一些伪文本(类content部分)。

步骤2 –图片 (Step 2 – Images)

All background images have fixed size 1600×600 pixels. It let us use the images on most screen resolutions (responsive layout). All our parallax blocks have the same fixed height (600px).

所有背景图像的固定尺寸均为1600×600像素。 它使我们可以在大多数屏幕分辨率(响应式布局)上使用图像。 我们所有的视差块都具有相同的固定高度(600px)。

步骤3 – CSS (Step 3 – CSS)

Now we need to expand the images to fill the whole available space, we set background-size: cover and then we set background-attachment: fixed to fix the background.

现在我们需要扩展图像以填充整个可用空间，我们设置background-size: cover ，然后设置background-attachment: fixed以修复背景。

.container {
  max-width: 960px;
  margin: 0 auto;
}
section.section:last-child {
  margin-bottom: 0;
}
section.section h2 {
  margin-bottom: 40px;
  font-family: "Roboto Slab", serif;
  font-size: 30px;
}
section.section p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
}
section.section p:last-child {
  margin-bottom: 0;
}
section.section.content {
  padding: 40px 0;
}
section.section.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.section.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.section.parallax-1 {
  background-image: url("../imgages/1.jpg");
}
section.section.parallax-2 {
  background-image: url("../imgages/2.jpg");
}
section.section.parallax-3 {
  background-image: url("../imgages/3.jpg");
}
@media all and (min-width: 600px) {
  section.section h2 {
    font-size: 42px;
  }
  section.section p {
    font-size: 20px;
  }
  section.section.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.section.parallax h1 {
    font-size: 160px;
  }
}

.container {
  max-width: 960px;
  margin: 0 auto;
}
section.section:last-child {
  margin-bottom: 0;
}
section.section h2 {
  margin-bottom: 40px;
  font-family: "Roboto Slab", serif;
  font-size: 30px;
}
section.section p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
}
section.section p:last-child {
  margin-bottom: 0;
}
section.section.content {
  padding: 40px 0;
}
section.section.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.section.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.section.parallax-1 {
  background-image: url("../imgages/1.jpg");
}
section.section.parallax-2 {
  background-image: url("../imgages/2.jpg");
}
section.section.parallax-3 {
  background-image: url("../imgages/3.jpg");
}
@media all and (min-width: 600px) {
  section.section h2 {
    font-size: 42px;
  }
  section.section p {
    font-size: 20px;
  }
  section.section.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.section.parallax h1 {
    font-size: 160px;
  }
}

Besides of styles for our sections, we added several responsive styles (for smaller screen resolutions).

除了本节的样式外，我们还添加了几种响应样式(用于较小的屏幕分辨率)。

现场演示

[sociallocker]

[社交储物柜]

下载资源

[/sociallocker]

[/ sociallocker]

结论 (Conclusion)

In question of the browser support – most modern browsers support this technique. But IE8 (and below) doesn’t support the background-size property. However I think that this is not a problem nowadays.

关于浏览器支持的问题–大多数现代浏览器都支持此技术。 但是IE8(及更低版本)不支持background-size属性。 但是，我认为现在这不是问题。

Today we implemented the basic parallax scrolling page. I hope that you like our result. See you later.

今天，我们实现了基本的视差滚动页面。 希望您喜欢我们的结果。 回头见。

翻译自: https://www.script-tutorials.com/parallax-scrolling-tutorial/

视差滚动