실제 대화 형 콘텐츠의 순수 CSS 시차는 '배경'으로 표시됩니까?

Question

비디오, 캔버스 또는 기타 대화 형 작업과 같은 여러 가지 "배경"레이어가있는 경우 시차 효과를 얻을 필요가 있습니다. 텍스트 벽을 스크롤하는 동안 텍스트가 "끝나야"할 수 있어야합니다. 다음 슬라이드로 스크롤하여 '배경'으로 여러 가지를 다시 채 웁니다. 간단한 참조를 위해 http://imgur.com/87iJllW을 참조하십시오 (smiley = interactive content, rectangle = text of wall).

내가 순수 CSS로 할 수있는 일인가요? 또는이 효과를 위해 ScrollMagic과 같은 라이브러리에 의지해야합니까?

Answer 1

사용 : 본질적으로 background-attachment: fixed;

가, 배경이 요소에 "고정"하고는 위로 스크롤 할 때, 그래서 당신의 이미지를 않습니다.

More info

UPDATE : 위치 : 당신의 부모 요소에 절대 당신의 요소입니다.

업데이트 2 : 좋아요, here 및 here이 유망 해 보입니다. 맞춤형 바이올린 만들기.

업데이트 3 초안 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 업데이트, 추가 서식. 주된 문제는 새 섹션을 스크롤하기 전에 마지막 섹션을 "지우지"않을 것이라는 점입니다.