Can I Nest CSS Parallax Groups?

Question

jsfiddle: https://jsfiddle.net/c3fveqgz/1/

Adapted from: https://keithclark.co.uk/articles/pure-css-parallax-websites/

I have a static element that has parallax background images in its children. I would like to make that outer element also have a parallax effect.

I've included my naive attempt in the jsfiddle, and the inner parallax effect is broken when id="NEST_ME" is a child of id="INSIDE_HERE".

Here's the HTML:

<div class="parallax-wrap">
  <div id="NEST_ME" class="parallax-view-wrap" style="height:60vh;">
    <div class="parallax-view" style="top:0; bottom:40vh">
      <div class="parallax-group">
        <div class="parallax-back cat-img"></div>
      </div>
    </div>
    <div class="parallax-view" style="top:20vh; bottom:20vh">
      <div class="parallax-group">
        <div class="parallax-back cat-img"></div>
      </div>
    </div>
    <div class="parallax-view" style="top:40vh; bottom:0;">
      <div class="parallax-group">
        <div class="parallax-back cat-img"></div>
      </div>
    </div>
  </div>

  <div class="parallax-group">
    <div id="INSIDE_HERE" class="parallax-fore cat-img"></div>
  </div>
</div>

You can check out the CSS in the jsfiddle link.

Answer 1

It works if you add the parallax-group class to the id="INSIDE_HERE" element, row 27 in your fiddle: https://jsfiddle.net/bc4umhxv/3/

Seems it has to do with the transform-style: preserve-3d; property that you need on your parent element.