Parallax CSS pur avec le contenu interactif réel comme «arrière-plan»?

Question

Je dois réaliser un effet de parallaxe où un assortiment de choses est le calque "arrière-plan", comme des vidéos, des toiles ou d'autres choses interactives, tandis que les murs défilent, et quand ces textes "finissent", je dois pouvoir faites défiler jusqu'à la diapositive suivante, en tenant, encore une fois, n'importe quel nombre de choses comme son «arrière-plan». Voir http://imgur.com/87iJllW pour une référence simple (smiley = contenu interactif, rectangle = mur de texte).

Est-ce quelque chose que je peux faire avec du CSS pur? Ou dois-je recourir à une bibliothèque comme ScrollMagic pour cet effet?

Answer 1

Utilisation: background-attachment: fixed;

En substance, l'arrière-plan est « fixé » à l'élément et quand il défile, donc que votre image.

More info

MISE À JOUR: Position: absolute votre élément à votre élément parent.

UPDATE2: Ok, here et here semble prometteur. Création de violon personnalisé.

UPDATE3 Brouillon de JSfiddle. logique principale:

.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: Mise à jour JSfiddle, mise en forme supplémentaire. Le problème principal est qu'il ne va pas «effacer» cette dernière section avant de faire défiler la nouvelle section.