JavaScript - ページ視差効果の実装について質問する

Question

ページ効果:

啓蟄

このエフェクトの模倣について:

私は Zhihu で skrollr.js というライブラリを初めて知り、それを学び、自分のページに適用しました。私のページは上記のような静的ノードではないため、記事や画像がリクエストされ、ステップバイステップで作成されます。リクエストは、img の onload イベントに依存して、一連の (記事 + 背景画像) テンプレートをレンダリングし、ページに追加します。初期実装では、固定位置を使用してすべての背景画像を画面上にスタックし、skrollr を使用して参照オブジェクトに基づいて CSS 属性ステータスを変更し、効果を実現します。しかし、実はエフェクトを書かなくてもskrollr.jsの初期化関数があればAndroid機では動作しません。 skrollr.js の作者も以下のように指摘しています:

その後、2階のJingzheページの効果を注意深く観察して、次のことを発見しました:

1. コンテナ内の各親ブロックは絶対的に配置され、左: 0 上: 0 右: 0 下: 0

2. コンテナは同様のキネティック ライブラリを使用してタッチ イベントを使用し、スクロールをシミュレートするために変換します。 。 。 エフェクトデモ: デモ

質問:

1. z-index 属性があるにもかかわらず、視差効果をどのように実現しているのですか

2. 彼の翻訳は基本的に 1 つの画面の高さを削除し、次のページが表示されます。 。 。 これを行う方法を詳しく説明してください

Answer 1

すべて絶対に配置され、右側のスクロール バーがシミュレートされます。同じ Z インデックスの高さでは、後続の要素が前の要素を自動的にカバーします。

つまり、スクロールの状態に応じて後続の翻訳を変更するだけです。1 枚のカードが別のカードを覆っていると理解できます。

簡単に言うと、最初にスクロールするときに、2 番目の画面の要素を上に移動し、複数の画面に達したら 2 番目の画面を開始します。

以下は背景画像の拡大・縮小などの効果です。