Skrollr의 앵커 대상 문제

Question

Skrollr을 사용하여 페이지를 스크롤 할 때 div를 서로 롤 오버하려고합니다. 두 div와 함께 작업하는 데 필요한 효과를 얻었으나 3 단으로 작동하도록 만들려고 할 때 첫 번째 및 마지막 div 만 작동하는 것처럼 보입니다. Skrollr의 데이터 앵커 대상 특성이 어떻게 작동하는지 완전히 이해하지 못하기 때문에 이것이라고 생각합니다. 다음은 HTML 내가 사용하려고 해요되어

<div id="skrollr-body"> 
     <div id="q1" data-0="top:0%;"> 
      Text 
     </div> 
     <div id="q2" data-anchor-target="#q1" data--200-bottom="top:100%;" data-top-bottom="top:0%;"> 
      Text2 
     </div> 
     <div id="q3" data-anchor-target="#q2" data--200-bottom="top:100%;" data-top-bottom="top:0%;"> 
      Text3 
     </div> 
    </div> 

그리고 CSS를 :

body, html { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 
#skrollr-body { 
    width:100%; 
    height:100%; 
    position:fixed; 
} 
#skrollr-body > div { 
    overflow:hidden; 
    position:absolute; 
    height: 100%; 
    width: 100%; 
} 
#q1 { 
    background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat; 
    background-size: cover; 
} 
#q2 { 
    background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat; 
    background-size: cover; 
} 
#q3 { 
    background: url(http://iwritealot.com/wp-content/uploads/2010/02/golden-clouds-wallpaper.jpg) center center no-repeat; 
    background-size: cover; 
} 

내가 그 예상대로 3 명 div의 행동을 허용하지 않습니다 실종 무엇

Fiddle here

, 처음과 마지막 대신에?

감사합니다.

Answer 1

여기 http://jsfiddle.net/YMYTy/1/

<div id="skrollr-body"> 
    <div id="q1"> 
     Text 
    </div> 
    <div id="q2" data-bottom-top="top:100%;" data-top="top:0%;"> 
     Text2 
    </div> 
    <div id="q3" data-bottom-top="top:100%;" data-top="top:0%;"> 
     Text3 
    </div> 
</div> 

그것은 내가 설명한 것보다 다른,하지만 작동 앵커 대상이없는 예입니다.

, 한 번 구현, 뷰포트의 하나 또는 두 배 높이를 아래로 스크롤 한 후 https://github.com/Prinzhorn/skrollr/issues/185이 훨씬 더 쉽게 당신은 다음 애니메이션을 가지고 data-100p 및 data-200p을 사용할 수 있습니다 것이 열려있는 기능 요청이있다.