Добавление перспективы в HTML для глобального Parallax - Pure CSS

Я следил за Keith Clark's по CSS Parallax. Его концепция выглядит так:

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 и детьми, однако это не работает.

Кто-нибудь знает, что пойдет не так?

Edit:

Codepen рабочего CSS на теле.

Codepen неработающего CSS на HTML.

Edit: Из-за большего количества осложнений с фиксированными позициями и обнаружения прокрутки тела (по-видимому, это не кажется), мне действительно нужно получить эту работу, используя элемент HTML.

Что странно, это то, что работает. Следуйте по этой ссылке и нажмите и перетащите ползунок влево/вправо, эффект параллакса есть, только когда вы прокрутите вниз...

Не слишком уверен, почему этот эффект не работает при прокрутке вниз...

Ответы

Ответ 1

Угадав, что никто не знает ответа на этот вопрос, я подумал, что могу опубликовать то, что я сделал.

Похоже, вы просто не можете использовать тег HTML для этого эффекта Parallax, поэтому я только что положил эффект на содержащий div, поэтому для таких функций, как липкие заголовки, я могу просто проверить размер прокрутки на этот div и установите все, что липкое для position: sticky.

Sticky не работает на Edge или IE, поэтому отпадает необходимость полностью отключить эффект параллакса в этих браузерах и дать прокрутку назад к элементу HTML, чтобы вы могли использовать position: fixed.

Запасной:

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

Ответ 2

Не уверен, что я полностью понял вашу проблему, но почему бы вам не игнорировать тело /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>