Question

我一直关注CSS Parallax的Keith Clark's指南。他的概念如此：

HTML：

<div class="container”>
  <div class="parallax-child”></div>
</div>

CSS：

.container {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 1px;
  perspective-origin: 0 0;
}

.parallax-child {
  transform-origin: 0 0;
  transform: translateZ(-2px) scale(3);
}

这在大多数情况下都很完美，例如在development website上。但是我需要将此效果添加到另一个我根本无法控制HTML结构的网站，下面是基本结构树，在我可以编辑的地方添加了注释。

<html>
  <body>
    <div itemscope itemtype="http://schema.org/AutoDealer">
      <div id="main-wrap">
        <div class="row">
          <div class="main twelvecol">

            <!-- Editable -->
            <div>
              <div class="row-block finance parallax__group">
                <div class="parallax__layer--back parallax__layer">
                  <p>Content in here scrolls slower than everything else</p>
                </div>
                <div class="wrapper">
                  <div class="container">
                    <div class="parallax__layer--base parallax__layer">
                      <p>This is all of the top level content</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- END Editable -->

          </div>
        </div>
      </div>
    </div>
  </body>
</html>

我可以添加我想要的任何样式，除了注释中所述之外，不能编辑HTML结构。

我的问题是我似乎无法使视差效果起作用，如果我将container样式用于视差效果（在此帖的顶部）body视差效应......

根据我的阅读，我需要将transform-style: preserve-3d;样式添加到container和子项之间的元素上，但这似乎不起作用。

任何人都知道出了什么问题？

修改

正文上的工作CSS的

Codepen。

HTML 上的

Codepen非工作CSS。

修改由于固定位置和检测体卷的更多复杂性（似乎不太可能），我真的需要通过使用HTML元素来实现这一点。

奇怪的是，这是有点作品。 Follow this link然后单击并向左/向右拖动滑块，视差效果就在那里，当你向下滚动时就不行了......

当你向下滚动时，不太清楚为什么这个效果不起作用......

Answer 1

猜猜没有人知道这个的答案，所以我想我也可以发布我所做的。

看起来你根本无法使用HTML标签来实现这种视差效果，所以我只是将效果放在一个包含的div上，所以对于诸如粘性标题之类的功能我可以简单地检查滚动此div上的金额，并将任何粘性设置为position: sticky。

Sticky不能在Edge或IE上工作，所以后退只是完全禁用这些浏览器上的视差效果，并将滚动返回到HTML元素，以便您可以使用position: fixed。< / p>

后备：

@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) and ((position: sticky))) {

Answer 2

不确定我是否完全理解您的问题，但为什么不忽略正文/ HTML并将其映射到您自己的可编辑元素。

参见工作示例

pdb

.body {
  perspective: 1px;
  height: 100vh !important;
  overflow-x: hidden;
  overflow-y: auto;
  preserve-origin-x: 100%;
}
.body > div { height: 200%; }
p { color: #fff; }
.parallax__group {
  position: relative;
  // transform-style: preserve-3d;
  overflow: hidden;
  height: 300px;
  margin-top: 100px;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
  position: relative;
  float: left;
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
  height: 100vh;
  background-image: url('https://static.pexels.com/photos/173383/pexels-photo-173383.jpeg');
  background-size: cover;
  background-position: center center;
}

.row-block {
  background: red;
}

它使用与您声称为“正常工作”的版本相同的CSS。我做的唯一改变是改变你的身体.body是一个额外的div包装器。这样，它只触摸您拥有/可以编辑的元素。

为全局视差添加透视HTML - 纯CSS

2 个答案: