attribute - title html css

Efecto de paralaje horizontal solo CSS con capas superiores a 100 vw

Question

¿Cómo arrancar un sitio con un efecto de paralaje horizontal solo en CSS ?

Requerimientos

• CSS solo paralaje
• capa primaria debe tener ancho / alto == 100vw / 100vh
• las capas secundarias deben tener ancho / alto> 100vw / 100vh
• las capas secundarias deben alinearse visualmente al 100% con el ancho de las capas principales
  • a estas alturas, las capas secundarias técnicamente tienen el 100% del ancho de los padres, pero debido a la perspective visual no parecen tener el 100% del ancho de los padres
• Las capas secundarias (excepto la primera) deben tener un desplazamiento superior con respecto a su padre
• Los resultados deben basarse en cálculos para tener la máxima flexibilidad.
• debe ser sólido en todos los navegadores (al menos la versión más reciente de las principales)

Lo que he hecho hasta ahora.

En realidad esta pregunta es una pregunta de seguimiento .
Aquí hay un PEN con mi estado de maqueta actual en SASS o CSS .

Ejemplo de simulación de trabajo (jQuery)

En JavaScript es bastante simple lograr lo que estoy buscando. Así que aquí hay un PEN que simula el efecto que me gustaría imitar con CSS.

Problemas ya conocidos

El problema que más me preocupa ahora es el hecho de que el navegador parece representar este escenario de manera diferente. Vea la captura de pantalla de la ventana del navegador (chrome vs ff) en la esquina inferior derecha a continuación. Pero espero que esto pueda evitarse.

Hay tantos tutoriales de paralaje por ahí. ¿Por qué es esto diferente?

En realidad, investigué mucho pero no encontré ni una sola descripción de cómo implementar el paralaje horizontal (significa que las capas secundarias tienen un ancho> 100 vw). Por supuesto, hay talla de desplazamiento de paralaje horizontal por ahí. Pero todos tienen uno en común: los anchos de la capa secundaria siempre son <= 100vw, y esa es la diferencia.

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>

Answer 1

No estoy 100% seguro de que obtuve exactamente lo que está apuntando, pero al menos tengo un paso adelante para usted. En este artículo sobre sitios de paralaje de pure-css, se realizó una actualización sobre cómo solucionar los errores relacionados con el webkit utilizando perspective-origin-x: 100% y transform-origin-x: 100% .

Si aplico esto en ambas direcciones x e y a su caso de maqueta actual con sass, termino cambiando solo #projection y .pro para ser así:

#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%

Y el comportamiento de paralaje comienza a parecerse mucho más a lo que podría esperar. Aquí está la última pluma: https://codepen.io/kball/pen/qPbPWa/?editors=0100