Estoy tratando de hacer una sección horizontal con un efecto de paralaje. En el fondo debe haber una imagen que se desplaza a una velocidad diferente a la de la página.
El problema es: quiero que el elemento de paralaje esté contenido en el elemento principal, por lo que el elemento principal funciona como una máscara para el elemento secundario: el elemento secundario solo es visible dentro de los límites del elemento principal.
Sé que esto se puede lograr colocando el elemento de paralaje entre dos elementos con fondos que están "encima" del elemento de paralaje y lo obstruyen, pero este método no es aplicable en mi caso.
La idea obvia que me viene a la mente es usar overflow: hidden on the parent. Sin embargo, esto rompe las transformaciones 3D, por lo que no queda paralaje.
¿Cómo logro el efecto descrito?
Aquí hay un codepen: https://codepen.io/rradarr/full/mdwgard . Quiero que el rectángulo rojo no sea visible fuera del "contenedor de paralaje" con el borde negro.
* { margin: 0; } html, body { height: 100% } main { position: relative; width: 100%; perspective: 1px; transform-style: preserve-3d; overflow-y: auto; overflow-x: hidden; height: 100vh; background-color: blue; } .static { min-height: 800px; } .parallax-container { border: solid black 3px; height: 600px; width: 100%; transform-style: preserve-3d; position: relative; } .parallax-child { position: relative; width: 100%; height: 100%; transform: translateZ(-2px) scale(2.01); z-index: -1; } #img-or-whatever { height: 900px; width: 100%; background-color: red; position: relative; z-index: -1; } <main> <div class="static"></div> <div class="parallax-container"> <div class="parallax-child"> <div id="img-or-whatever"></div> </div> </div> <div class="static"></div> </main>Que yo sepa, no puedes lograr el efecto descrito con translateZ. Esto se debe a que según este artículo sobre CSS 3D
... dar al desbordamiento cualquier valor que no sea visible fuerza efectivamente el valor de transform-style a plano, incluso cuando lo hemos establecido explícitamente en preserve-3d.
La única alternativa para el desbordamiento oculto es put something "above" the parallax element hasta donde yo sé (lo que dijiste que querías evitar).
Si realmente no hay una opción para poner algo "por encima" del elemento de paralaje, podría intentar hacer algo similar con js (algo como esto, por ejemplo ). Esto no es lo ideal, ya que implicará muchos cálculos y variables, y puede llevar algo de tiempo lograr exactamente lo que desea (y pierde el 3D dentro del contenedor porque necesita desbordamiento: oculto de todos modos).
Si realmente necesita el 3d dentro, podría crear una solución más compleja con javascript que omita el overflow: hidden también. Pero trataría de evitar eso si no es obligatorio (prefiero agregar un elemento absoluto sobre el overflow: hidden donde está habilitado 3D. Y darle al contenedor absoluto un fondo transparente si aún necesita 3D en esa sección).
Por lo general, también recomendaría tratar de evitar .js para este tipo de cosas (si es posible), pero no creo que tenga muchas opciones aquí.
Podría probar el pseudo clss :not(), pero no sé qué pasaría entre paréntesis que sería similar a no en el cuadrado negro.