Горизонтальный CSS эффект только параллакса со слоями более 100vw

Как загрузить сайт с горизонтальным эффектом только параллакса CSS?

Требования

  • CSS только параллакс
  • родительский слой должен иметь ширину/высоту == 100vw/100vh
  • дочерние слои должны иметь ширину/высоту > 100vw/100vh
  • дочерние слои должны визуально выравнивать 100% с шириной родительских слоев
    • к настоящему времени дочерние слои технически имеют 100% ширины родителей, но из-за perspective они визуально не отображают 100% ширины родителей.
  • дочерние слои (кроме первого) должны иметь верхнее смещение относительно его родительского
  • результаты должны основываться на расчетах с максимальной гибкостью.
  • должен быть перекрестным браузером (по крайней мере, новейшая версия майоров).

введите описание изображения здесь


Что я сделал до сих пор

На самом деле этот вопрос является последующим вопросом.
Здесь PEN с моим текущим состоянием макета в SASS или CSS.

Рабочий симулированный пример (jQuery)

В JavaScript его довольно просто добиться того, что я ищу. Итак, вот PEN, который имитирует эффект, который мне нужен для имитации CSS.

Уже известные проблемы

Проблема, к которой я сейчас больше всего беспокоюсь, заключается в том, что браузер, похоже, делает этот сценарий по-разному. Смотрите снимок экрана окна браузера (chrome vs ff), прокручиваемого в нижнем правом углу ниже. Но я надеюсь, что этого можно избежать.

введите описание изображения здесь


Там так много уроков параллакса. Почему это отличается?

На самом деле я много исследовал, но не нашел ни одного описания, как реализовать горизонтальный параллакс (это означает, что дочерние слои имеют ширину > 100 вольт). Конечно, есть горизонтальная прокрутка parallax. Но все они имеют одно общее: ширина детского слоя всегда равна <= 100vw - и на самом деле это различие.

html,
body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

body {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

#projection {
  -webkit-perspective: 1px;
  perspective: 1px;
  -webkit-perspective-origin: 0 0;
  perspective-origin: 0 0;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.pro {
  -webkit-transform: scale(1) translate(0px, 0px) translateZ(0px);
  transform: scale(1) translate(0px, 0px) translateZ(0px);
  height: 100%;
  position: absolute;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 100%;
}

.pro--1 {
  -webkit-transform: scale(4) translate(0px, 0px) translateZ(-3px);
  transform: scale(4) translate(0px, 0px) translateZ(-3px);
  width: 110%;
}

.pro--2 {
  -webkit-transform: scale(3) translate(0px, 1em) translateZ(-2px);
  transform: scale(3) translate(0px, 1em) translateZ(-2px);
  width: 110%;
}

.pro--3 {
  -webkit-transform: scale(2) translate(0px, 2em) translateZ(-1px);
  transform: scale(2) translate(0px, 2em) translateZ(-1px);
  width: 110%;
}

.pro {
  background: rgba(0, 0, 0, 0.33);
  box-shadow: inset 0 0 0 5px orange;
  color: orange;
  font-size: 4em;
  line-height: 1em;
  text-align: center;
}

.pro--2 {
  box-shadow: inset 0 0 0 5px green;
  color: green;
}

.pro--3 {
  box-shadow: inset 0 0 0 5px blue;
  color: blue;
}
<div id="projection">
  <div class="pro pro--1">pro--1</div>
  <div class="pro pro--2">pro--2</div>
  <div class="pro pro--3">pro--3</div>
</div>

Ответы

Ответ 1

Я не на 100% уверен, что у меня есть точно, на что вы нацеливаетесь, но я, по крайней мере, сделал для вас шаг вперед. В этой статье на сайтах parallax pure-css появилось обновление относительно работы с связанными с webkit ошибками с помощью perspective-origin-x: 100% и transform-origin-x: 100%.

Если я применил это в обоих направлениях x и y к вашему текущему макету с помощью sass, я в конечном итоге изменяю только #projection и .pro так:

#projection
  perspective: $perspective + 0px
  perspective-origin: 100% 100%
  height: 100%
  overflow: auto
  width: 100%

.pro
  @include projection()
  height: 100%
  position: absolute
  transform-origin: 100% 100%
  transform-style: preserve-3d
  width: 100%

И поведение параллакса начинает выглядеть намного больше, как я мог ожидать. Вот последнее перо: https://codepen.io/kball/pen/qPbPWa/?editors=0100