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

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 位置，但是当我这样做时我的图像不再出现。如何让这张图片有视差效果？

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>

Answer 2

您实际上可以制作纯粹的 CSS 视差效果，而不需要 background-image 或 background-attachment。 Keith Clark 有一个很棒的 write up & tutorial on it。为了示例，我将借用他的代码：

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 计算比例。所以 transform: translateZ(-10px) 应该是 transform: translateZ(-2px) scale(3) 假设你将 perspective 设置为 1px.

然后将 .parallax 容器的 perspective 更改为 1px，这会将 <div> 视角设置为中心。添加overflow-y: auto允许内容正常滚动，但后代元素将渲染到固定视角。

因为这只使用了<div>和CSS，你应该可以在没有JS的情况下解决你的问题。您可以轻松地将图像放在 div 中。这是一个包含大量不同部分的 simple demo that shows just a single <div> parallax effect. If you look at the source code, you'll see no JavaScript except the part for Google Analytics. Here's a demo。

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

Answer 3

无论出于何种原因，这似乎对我来说效果最好：

https://github.com/deggenschwiler/jquery_parallax

页眉中需要 jQuery：

<html>
<head>
    <style>
      .parallax {
        height: 400px;
        width: 100%;
        background-image: url("SOMEBGIMAGE.jpg");
        background-position-y: 0%;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script>
    $(window).scroll(function() {
          var y = 0;
          var scroll = $(window).scrollTop();
          var win = $(window).height()
          var height = $(".parallax").height();
          var offset = $(".parallax").offset().top;
          y = ((100 * scroll)/(height + win)) + ((100 * (win - offset))/(height + win));
          if (y > 100){y = 100;}
          else if (y < 0){y = 0;}
          var out = String(y) + "%";
          $(".parallax").css("background-position-y", out);
    });
    </script>
</head>
<body>
    <div class="parallax">
    </div>
</body>
</html>

Answer 4

纯 CSS-解决方法：将容器填充设置为视差的高度（例如 100vh），然后将 fixed/absolute 子项（视差区域）放置在其中。尝试使用 z-index 来实现视差滚动效果。为我工作:)

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

How do I create a parallax effect without using a background-image?

html

css

parallax

HTML

CSS

HTML

CSS