ページ効果:

啓蟄

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

私は 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 つの画面の高さを削除し、次のページが表示されます。 。 。 これを行う方法を詳しく説明してください