Skrollr는 창 크기를 조정하지 않으면 끝 키 프레임 만 표시합니다.

Question

실례합니다. 제가 디자이너이기 때문에 JavaScript가별로 모릅니다.

상대 모드에서 두 개의 애니메이션을 볼 수 있습니다. 상대방 모드에서는 시작 키 프레임 (스크롤하는 시점)에있을지라도 처음 보았을 때 끝 키 프레임에 표시됩니다. 어떤 방식 으로든 브라우저 창의 크기를 조정하면 올바른 동작을 취하고 예상되는 위치의 시작 키 프레임으로 돌아갑니다. 그러나 페이지를 다시 새로 고침하면 끝 키 프레임에서 항상로드되므로 잘못된 뷰포트 크기 또는 스크롤 위치를 얻게됩니다. 제가 크기를 조정하지 않고 잘 작동 절대 모드에서 하나의 애니메이션이

<div id="venn-prototyping" class="venn" 
data-100-top-top="transform[swing]:translate(0px,0px);" 
data--100-top-bottom="transform[swing]:translate(-290px,600px);"> 
    <h2>Prototyping</h2> 
</div> 

: http://vostrocity.dreamhosters.com/#skills 예를 들어

, 다음 만 표시 끝 키 프레임은 내가 창 크기를 조정하지 않는 : 여기

사이트입니다 브라우저 창.

Answer 1

레이아웃에 영향을주는 모든 이미지가로드 될 때 skrollr을 초기화해야합니다. 예를 들어 examples 요소 내부에는 부모의 높이에 영향을주는 이미지가 있으므로 뷰포트에 대한 벤 다이어그램의 위치가 결정됩니다 (이미지가로드되면 다이어그램이 아래로 이동 함). 다이어그램은 실제로 애니메이션으로 표시되지만이 오프셋으로 인해 뷰포트에 들어가기 전에 표시됩니다.