如何在不使用背景图像的情况下创建视差效果？

Question

我试图在不使用 background-image 和 background-attachment: fixed 的情况下创建视差效果，因为 background-attachment: fixed 在 iOS 上效果不佳。这是我想出的：

HTML

 <article class="twentyseventeen-panel">
  <div class="panel-image">
    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;" >
      <img src="<?php echo esc_url( $thumbnail[0] ); ?>" style="width: 100%;" />
    </div>
  </div>
</article>

CSS

 .twentyseventeen-panel {
    overflow: hidden;
    position: relative;
}
.panel-image {
    position: relative;
    height: 100vh;
    max-height: 200px;
}

现在我坚持让图像滚动来做视差效果。我已经尝试将图像设置为 fixed 位置，但是当我这样做时我的图像不再出现。如何使此图像具有视差效果？

原文由 user979331 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不幸的是，我不知道使用纯 CSS 有什么确定的方法。原因是因为无法获取当前滚动位置（我们可以在 calc() 中使用）。此外，当使用 fixed 定位元素时，它不再关心其父元素，并且无法强制执行 overflow:hidden 。

有两种方法可以在不使用背景的情况下创建视差效果，一种是使用 JavaScript，我已经为您提供了一个完整的工作示例。它是最小的，可能会使浏览器无所事事地工作太多，但它确实有效。如果您有很多元素，您肯定会希望对其进行优化以仅应用于可见的元素。

 $(document).ready(function() {
  var onScroll = function() {
    var scrollTop = $(this).scrollTop();
    $('.paralax-image').each(function(index, elem) {
      var $elem = $(elem);
      $elem.find('img').css('top', scrollTop - $elem.offset().top);
    });
  };
  onScroll.apply(window);
  $(window).on('scroll', onScroll);
});

 .content {
  height: 500px;
}

.paralax-image {
  overflow: hidden;
  height: 200px;
  position: relative;
}

.paralax-image img {
  position: absolute;
  height: 100vh;
  min-width:100%;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <h2>Lorem Ipsum</h2>
  <div class="paralax-image">
    <img src="https://via.placeholder.com/400x200">
  </div>

</div>

现在是完整的 CSS 部分……实现起来有点复杂，并且不能对每种布局都完成。诀窍是让您的图像使用 position:fixed 规则。但是，与其不成功地依赖 overflow:hidden ，不如让它们处于最低的 z-index，让所有元素都有背景，并在要显示图像的地方创建“孔”。这会在添加背景时产生很多问题，您必须制作多个不同的元素以确保始终有可能显示视差图像。我试图在不创建过于复杂的示例的情况下演示如何实现这一点。此技术仅适用于 1 张图像。如果您希望它与多个图像一起使用，则必须使用 javascript 相应地切换可见性，并且一次只能看到 1 个视差效果。

 /* Can't use margins no more... */

h1 {
  margin: 0;
  padding: 0.67em 0;
}

p {
  margin: 0;
  padding: 1em 0 0;
}

body {
  margin: 0;
}

.container>* {
  background-color: white;
}

.paralaxed {
  z-index: -2;
  height: 100vh;
  position: fixed;
  top: 0;
}

.paralax-image {
  background: transparent;
  height: 200px;
}

 <div class="container">
  <img class="paralaxed" src="https://via.placeholder.com/400x200">
  <h1>My Title here</h1>
  <div class="paralax-image"></div>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
</div>

原文由 Salketer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您实际上可以制作纯 CSS 视差效果，而无需 background-image 或 background-attachment 。 Keith Clark 对此有一篇很棒 的文章和教程。为了这个例子，我将借用他的代码：

HTML

 <div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    ...
  </div>
  <div class="parallax__layer parallax__layer--base">
    ...
  </div>
</div>

CSS

 .parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}

这实际上是一个非常简单的解决方案，但可能需要花一点时间才能理解这一切是如何发生的。这里发生的一件大事是 transform: translateZ(-1px) scale(2) ，它将 <div> 沿 z 轴向后移动并将其调整回正常大小。设置 z 轴就是控制视差速度的方式。所以 translateZ(-1px) 比 translateZ(-2px) 慢。

现在 div 已在 z 轴上移回原位，需要将其大小调整回正常大小。为此，您只需将 scale 添加到 transform 属性。必须使用 1 + (translateZ * -1) / perspective 计算比例。 So transform: translateZ(-10px) should be transform: translateZ(-2px) scale(3) assuming you keep the perspective set to 1px .

Then the perspective is changed to 1px for the .parallax container which will set the <div> perspective to the center.添加 overflow-y: auto 允许内容正常滚动，但后代元素将呈现到固定视角。

由于这只使用 <div> 和 CSS ，你应该能够在没有 JS 的情况下解决你的问题。您可以轻松地将图像放在 div 中。这是一个 简单的演示，仅显示一个 <div> 视差效果。如果您查看源代码，您会发现除了用于 Google Analytics 的部分之外没有任何 JavaScript。 这是一个包含大量不同部分的演示。

我建议您阅读 本教程，因为代码应该可以满足您的所有需求。此外，它还可以在 iOS、Safari、Chrome 和 FF 上完美运行。我已经用过很多次了，我怎么推荐都不为过。不用说，我从那个教程中借用了很多答案，所以支持 Keith Clark 写出精彩的文章。

原文由 Matthew Beckman 发布，翻译遵循 CC BY-SA 3.0 许可协议