Чистый параллакс CSS с фактическим интерактивным контентом как «фон»?

Question

Мне нужно добиться эффекта параллакса, когда ассортимент предметов является «фоновым» слоем, например видео, холстами или другими интерактивными вещами, в то время как стены текста прокручиваются, и когда эти тексты «заканчиваются», мне нужно иметь возможность перейдите к следующему слайду, удерживая, опять же, любое количество вещей в качестве «фона». См. http://imgur.com/87iJllW для простой справки (смайлик = интерактивный контент, прямоугольник = стена текста).

Это что-то, что я могу сделать с помощью чистого CSS? Или мне нужно прибегнуть к такой библиотеке, как ScrollMagic?

Answer 1

Использование: background-attachment: fixed;

В сущности, фон «фиксируются» к элементу, и когда она прокручивается вверх, так что делает ваш образ.

More info

UPDATE: Должность: абсолютный ваш элемент вашего родительского элемента.

UPDATE2: ОК, here и here выглядит многообещающим. Создание пользовательской скрипки.

UPDATE3 Грубая осадка JSfiddle. Главная логика:

.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: Обновлено JSfiddle, дополнительное форматирование. Основная проблема заключается в том, что он не будет «очищать» последний раздел перед прокруткой нового раздела.