javascript - 페이지 시차 효과 구현에 대해 문의

Question

페이지 효과:

징저

이 효과의 모방에 관하여:

Zhihu에서 skrollr.js라는 라이브러리에 대해 처음 배웠고, 이를 나만의 페이지에 적용했습니다. 제 페이지는 위와 같은 정적 노드가 아니기 때문에 기사와 사진을 요청하고 단계별로 작성합니다. 요청은 img의 onload 이벤트를 사용하여 (기사 + 배경 이미지) 템플릿 세트를 렌더링하고 이를 페이지에 추가합니다. 초기 구현은 고정 위치 지정을 사용하여 화면에 모든 배경 이미지를 쌓고 skrollr을 사용하여 참조 객체를 기반으로 CSS 속성 상태를 변경하여 효과를 얻는 것이었습니다. 그러나 실제로 아무런 효과를 작성하지 않더라도 skrollr.js의 초기화 기능이 있는 한 Android 시스템에서는 작동하지 않습니다. skrollr.js의 저자도 아래와 같이 지적했습니다.

나중에 위층에 있는 Jingzhe 페이지의 효과를 주의 깊게 관찰한 결과 다음을 발견했습니다.

1. 컨테이너 내의 각 상위 블록은 절대적 위치에 있으며 왼쪽: 0 위쪽: 0 오른쪽: 0 아래쪽: 0

2. 컨테이너는 유사한 키네틱 라이브러리를 사용하여 터치 이벤트를 사용하고 번역하여 스크롤을 시뮬레이션합니다. . . 효과 데모: 데모

질문:

1. Z-색인 속성을 보면 시차 효과를 얻는 방법

2. 그의 번역은 기본적으로 한 화면의 높이를 없애고 나면 다음 페이지가 나옵니다. . . 어떻게 하는지 자세히 설명해주세요

Answer 1

모두 절대 위치에 있으며 오른쪽의 스크롤 막대가 시뮬레이션됩니다. 동일한 Z-인덱스 높이에서 후속 요소는 자동으로 이전 요소를 덮습니다.

그러니 스크롤 상태에 따라 후속 번역을 변경하면 하나의 카드가 다른 카드를 덮는 것으로 이해할 수 있습니다.

간단히 말하면, 처음 스크롤할 때 두 번째 화면의 요소를 위로 이동하면 두 개 이상의 화면에 도달하면 두 번째 화면이 시작됩니다.

다음은 배경 이미지 확대/축소 등의 일부 효과입니다.