多层视差滚动效果_使用CSS创建滚动视差效果

多层视差滚动效果

does not function on mobile devices. To create a mobile-compatible pure CSS parallax scrolling effect, 不起作用 。 要创建与移动设备兼容的纯CSS视差滚动效果， please visit this post by Keith Clark. 请访问Keith Clark的这篇文章 。

I generally dislike ESPN because they're the McDonalds of sports news but they recently did a piece on Luis Suarez that was eye-catching.  The content itself was great but their use of parallax and imagery was outstanding.  They've employed this technique in a few of their features now and I've been so impressed that I implored my readers to write about how it's done.  The following is a post principally written by Stefan Judis with detail added by myself.  Enjoy!

我通常不喜欢ESPN，因为他们是体育新闻的麦当劳，但最近他们对Luis Suarez的报道引人注目。 内容本身很棒，但是对视差和图像的使用非常出色。 他们现在已经在其一些功能中采用了这种技术，并且给我留下了深刻的印象，以至于我恳求读者写一下它是如何完成的。 以下是主要由Stefan Judis撰写的帖子，我自己添加了详细信息。 请享用！

介绍 (Introduction)

For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a nice optical effect and keeps the attention of the visitor.

长期以来，具有所谓的“视差”效果的网站已经非常流行。 如果您还没有听说过这种效果，则它基本上包括沿不同方向或以不同速度移动的不同图像层。 这导致良好的视觉效果，并吸引游客的注意力。

View Demo 观看演示

In web design, the most common way to achieve this is by simply adding a jQuery plugin to a website. Doing this unfortunately has a few disadvantages. These plugins mostly attach an event handler to the scroll event of the window object. This leads to tons of events being handled via JavaScript (handling the scroll event can easily cause performance issues and should be considered carefully). To move the mentioned layers, background positions of images get calculated and set to the depending elements, which then additionally causes a lot of DOM manipulations.

在网页设计中，最常见的实现方法是向网站添加jQuery插件。 不幸的是，这样做有一些缺点。 这些插件大多将事件处理程序附加到window对象的scroll事件。 这导致大量事件通过JavaScript处理(处理scroll事件很容易导致性能问题，应仔细考虑)。 为了移动提到的图层，需要计算图像的背景位置并将其设置为从属元素，然后另外会引起很多DOM操作。

In short: parallax done with JavaScript can decrease the scrolling performance of a website quite quickly.

简而言之：用JavaScript完成的视差会很快降低网站的滚动性能。

background-position: fixed为救援 (background-position: fixed to the Rescue)

What only a few people may know, is that this effect can be achieved via CSS, too. Check out the example below:

只有少数人可能知道，这种效果也可以通过CSS来实现。 查看以下示例：

See the Pen Parallax with background-attachment : fixed by Stefan Judis (@stefanjudis) on CodePen.

请参阅带有背景附件的笔视差：由Stefan Judis( @stefanjudis )在CodePen上修复 。

To get this parallax effect, background images have to be placed on different elements. These elements additionally need to have defined background-attachment: fixed. By defining background-attachment the behavior and positioning of any background image can be changed.

为了获得这种视差效果，必须将背景图像放置在不同的元素上。 这些元素还需要具有定义的background-attachment: fixed 。 通过定义background-attachment ，可以更改任何背景图像的行为和位置。

The initial value of the property is scroll, which basically means that the image position is fixed to its element. There is nothing fancy about that and we all know this behavior. The user scrolls on a website and elements are moving up and down and so do the background images.

该属性的初始值为scroll ，这基本上意味着图像位置固定为其元素。 对此没有任何幻想，我们都知道这种行为。 用户在网站上滚动，元素在上下移动，背景图像也是如此。

It gets interesting by setting the background-attachment to fixed. fixed defines that the background image position is not fixed to the depending element but rather fixed to the viewport. This means that the image will stay visually on the same position no matter how much scrolling will be done. This leads to the nice visual parallax effect.

通过将background-attachment设置为fixed可以使它变得有趣。 fixed定义背景图像位置不固定到依赖元素，而是固定到视口。 这意味着无论要进行多少滚动，图像都将在视觉上停留在同一位置。 这导致了很好的视觉视差效果。

Let's have a quick check on the actual implementation:

让我们快速检查一下实际的实现：

<!-- Four containers for setting the background images -->
<div class="parallax">
  <div class="bg__foo">foo</div>
  <div class="bg__bar">bar</div>
  <div class="bg__baz">baz</div>
  <div class="bg__bazz">bazz</div>
</div>

// setting base styles to image containers
[class*="bg__"] {
  height: 50vh;

  text-indent: -9999px;

  /* fix background */
  background-attachment: fixed;

  /* center it */
  background-position: center center;

  /* Scale it nicely to the element */
  background-size: cover;

  /* just make it look a bit better ;) */
  &:nth-child(2n) {
    box-shadow: inset 0 0 1em #111;
  }
}

.bg__foo {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg
  );
}

.bg__bar {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg
  );
}

.bg__baz {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg
  );
}

.bg__bazz {
  height: 100vh;

  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg
  );
}

A quick check regarding browser support on MDN shows almost global compatibility. It is already supported in IE9 and Android 2.1.

关于MDN上浏览器支持的快速检查显示出几乎全球的兼容性。 IE9和Android 2.1已支持它。

View Demo 观看演示

总结 (Sum up)

I personally prefer CSS solutions to JavaScript solutions and this is a perfect example for my preference. There is no logic and no additional DOM manipulation needed, which makes the whole solution pretty nice. But there is still one thing to remember when dealing with parallax effects.

我个人更喜欢CSS解决方案而不是JavaScript解决方案，这是我偏爱的完美示例。 没有逻辑，也不需要其他DOM操作，这使得整个解决方案都非常不错。 但是，在处理视差效果时仍要记住一件事。

Even with this CSS solution there is a lot of stuff to do for the browser. background-attachment: fixed will lead to much more painting that needs to be done by the browser, which can affect the scrolling performance and maybe drop your FPS (remember the 60FPS goal?). So keeping an eye on the FPS meter e.g. in Chrome when doing these kind of things is always a good idea.

即使使用此CSS解决方案，浏览器仍有很多工作要做。 background-attachment: fixed将导致浏览器需要进行更多绘制，这可能会影响滚动性能并可能降低您的FPS(还记得60FPS目标吗？)。 因此，在进行此类操作时，例如在Chrome中监视FPS仪表始终是一个好主意。

翻译自: https://davidwalsh.name/parallax

多层视差滚动效果