css的一些小技巧！页面视觉差！_html/css

css的一些小技巧！页面视觉差！_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 11:45:24

Original

1159 Leute haben es durchsucht

相当长的一段时间，现在网站与所谓的“视差”效果一直很受欢迎。万一你没有听说过这种效果，不同的图像，在不同的方向移动或层主要包括。这导致了一个很好的光学效应，使参观者的注意。

在网页设计中，为了实现这是简单的一个网站添加一个jQuery插件的最常见的方式。这样做，不幸的是，有几个缺点。这些插件是将事件处理程序附加到滚动事件的窗口目标这导致了事件处理通过JavaScript吨（处理滚动事件可以很容易造成性能问题，应仔细考虑）。将上述层，图像背景的位置获得计算和设置为不同的元素，然后另外的原因很多DOM操作。

总之：视差用JavaScript可以减少一个网站的滚动性能很快。

background-attachment: fixed

什么只有很少人会知道，这种影响可以通过CSS，太。看看下面的例子：

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

得到这个视差效果，背景图像被放置在不同的元素。这些元素需要另外定义background-attachment: fixed。通过定义background-attachment和任何背景图像的定位是可以改变的。

属性的初始值scroll基本上，这意味着图像的位置是固定的元素。没有任何花哨，而我们都知道这样的行为。在一个网站和元素用户滚动向上和向下等动做背景图像。

它变得有趣的设置background-attachment:fixed。 fixed的定义了背景图像的位置是不固定的依赖元素而固定到视口。这意味着图像会在视觉上相同的位置，无论怎么滚动会做。这导致了很好的视觉视差效应。

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

<!-- 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  );}

Nach dem Login kopieren

几乎全球兼容性。它已经在IE9和Android 2.1支持。

Nach dem Login kopieren

总结

我个人比较喜欢CSS解决JavaScript解决方案和这是我的偏好一个完美的例子。有没有逻辑，没有额外的DOM操作的需要，这使得整个解决方案，很好。但还是有一件事要记住当处理视差效应。

即使这个CSS的解决方案有很多事情要做。 background-attachment: fixed将导致更多的画，需要通过浏览器完成，这可能会影响性能和可能降低你的FPS滚动（记得60fps的目标吗？）。所以保持一个眼睛的FPS计在Chrome做这些事情时，总是一个好主意。