Pure CSS parallax with actual interactive content as 'background'?

Question

I need to achieve a parallax effect where an assortment of things are the "background" layer, like videos, canvases or other interactive things, while walls of text scroll by, and when those texts "end" I need to be able to scroll to the next slide, holding, again, any number of things as its 'background'. See https://i.stack.imgur.com/e4TVG.jpg for a simple reference (smiley = interactive content, rectangle = wall of text).

Is that something I can do with pure CSS? Or do I need to resort to a library like ScrollMagic for this effect?

Answer 1

Use: background-attachment: fixed;

In essence, the background is "fixed" to the element and when it scrolls up, so does your image.

More info

UPDATE: Position: absolute your element to your parent element.

UPDATE2: Okay, here and here looks promising. Creating custom fiddle.

UPDATE3 Rough draft of JSfiddle. Main logic:

.depth-1 {
  position: relative;
  background: red;
  width: 100%;
  height: 100vh;
  margin: 10px;
}

.depth-2::-webkit-scrollbar {
  display: none;
}

.depth-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  overflow-y: scroll;
  color: blue;
}

.depth-3 {
  width: 100%;
  padding-right: 17px;
}

.dont-move {
  height: 50px;
  width: 100px;
  z-index: 10;
  position: absolute;
  background: grey;
  right: 10px;
  top: 10px;
}

<div class="depth-1">
  <div class="depth-2">
    <div class="depth-3">
      <div class="depth-4">
        ...
      </div>
    </div>
  </div>
  <div class="dont-move">
    ...
  </div>
</div>
<div class="depth-1">
  <div class="depth-2">
    <div class="depth-3">
      <div class="depth-4">
        ...
      </div>
    </div>
  </div>
  <div class="dont-move">
    ...
  </div>
</div>

UPDATE4: Updated JSfiddle, additional formatting. The main problem is that it won't "clear" that last section before scrolling the new section.