为全球视差效果添加HTML透视 - 纯CSS

Question

为全球视差效果添加HTML透视 - 纯CSS

11

我一直在跟随Keith Clark的CSS视差指南。他的概念如下：

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

这对大部分情况都有效，例如在我的开发网站上。然而我需要将这个效果添加到另一个网站上，但是我几乎无法控制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和子元素之间的元素上，但是这似乎不起作用。

有人知道出了什么问题吗？

编辑：

Codepen 展示在 body 上的工作 CSS。

Codepen 展示在 HTML 上的未能正常工作的 CSS。

编辑：由于固定位置和检测页面滚动的更多复杂性（似乎不可能），我真的需要通过使用 HTML 元素来使其正常工作。

奇怪的是，它有点起作用。点击此链接，左/右拖动滑块，即可看到视差效果，但向下滚动时却没有...

不太确定为什么向下滚动时这个效果不起作用...

- Martyn Ball

你为什么要改成HTML而不是body？ - nitobuendia

将其放在主体上可以防止页脚显示，因为页脚位于主体下方。 - Martyn Ball

2个回答

0

我不确定我是否完全理解了你的问题，但你为什么不忽略正文/HTML，直接将其映射到你自己的可编辑元素上呢？

请参考工作示例。

.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;
}

<html>

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

          <!-- Editable -->
          <div class="body">
            <div>
              <div class="row-block finance parallax__group">
                <div class="parallax__layer--back parallax__layer"></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>
          </div>
          <!-- END Editable -->

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

</html>

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

- nitobuendia

这么做只会使 div.body 单独滚动到页面，明天我会设置一个更好的示例，以便效果更加清晰。 - Martyn Ball

当然可以。很高兴检查新的例子 :) - nitobuendia

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Martyn Ball · Accepted Answer

我猜没有人知道这个答案，所以我想我可能会发布一下我的做法。

看起来你不能简单地使用HTML标签来实现视差效果，所以我只是将效果放在一个包含的

中，这样对于像粘性标题这样的功能，我只需检查此

上的滚动量并将任何粘性内容设置为position: sticky。

Edge或IE上无法使用sticky，因此备用方案就是完全禁用这些浏览器上的视差效果，并将滚动返回到HTML元素，这样您可以使用position: fixed。

备选方案：

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