Skrollr - 상대 div의 시차 배경이 뷰포트의 중간에서 롤백 중지됨

Question

skrollr을 사용하여 실제로 간단한 시차 레이아웃을 작성하는 방법을 알아 내려고 노력하면서 수십 개의 튜토리얼과 며칠 동안 노력 했어야합니다.

배경 이미지가 포함 된 3 개의 div가 있으며 페이지 아래쪽 위치가 서로 다릅니다. 각각은 페이지 레이아웃이 아닌 뷰포트의 위치에 상대적으로 배경 스크롤을 가져야합니다.

내 삶은 상대 모드를 지정하는 방법을 이해할 수 없으며 뷰포트에 표시되는 시간 동안 내 배경 이미지를 스크롤 할 수 없습니다. 그들은 뷰포트를 굴리기 전에 스크롤을 멈 춥니 다. 여기

내 데모 페이지 : 페이지에 http://3fishbeta.co.uk/build/040-skrollr/05-skrollr-positioning

첫 번째 이미지 컨테이너는 다음과 같습니다

<div class="imageContainer" data-bottom="background-position:50% -700px;" data-top-bottom="background-position:50% 0px;" data-anchor-target="#trigger1" ></div> 

난 그냥 데이터 상단 또는 데이터 하단의 설정을 이해하지 않습니다. 이미지는 컨테이너가 뷰포트를 나올 때까지 계속 스크롤해야하지만 일찍 중지됩니다. 이 컨테이너의 최고이 컨테이너의 바닥 대신 ... 내가 생각해야 뷰포트 ...의 상단에 도달 할 때 즉

는 이미지가 이동을 멈 춥니 다.

아무도 도와 줄 수 있나요 ??

Answer 1

나는 내 자신의 질문에 대답했다. 이미지 컨테이너의 높이는 500px입니다. 데이터 상단 게재 순위는 500 픽셀로 설정해야합니다.

과 같이 : 상단 위치가 -500

내가 그 사람을 도움이 되었으면 좋겠로 설정

data--500-top="background-position:50% 100%;" 

...!