ページ効果:
啓蟄
このエフェクトの模倣について:
私は Zhihu で skrollr.js というライブラリを初めて知り、それを?qū)Wび、自分のページに適用しました。私のページは上記のような靜的ノードではないため、記事や畫(huà)像がリクエストされ、ステップバイステップで作成されます。リクエストは、img の onload イベントに依存して、一連の (記事 + 背景畫(huà)像) テンプレートをレンダリングし、ページに追加します。初期実裝では、固定位置を使用してすべての背景畫(huà)像を畫(huà)面上にスタックし、skrollr を使用して參照オブジェクトに基づいて CSS 屬性ステータスを変更し、効果を?qū)g現(xiàn)します。しかし、実はエフェクトを書(shū)かなくてもskrollr.jsの初期化関數(shù)があればAndroid機(jī)では動(dòng)作しません。 skrollr.js の作者も以下のように指摘しています:
その後、2階のJingzheページの効果を注意深く観察して、次のことを発見(jiàn)しました:
コンテナ內(nèi)の各親ブロックは絶対的に配置され、左: 0 上: 0 右: 0 下: 0
コンテナは同様のキネティック ライブラリを使用してタッチ イベントを使用し、スクロールをシミュレートするために変換します。 。 。 エフェクトデモ: デモ
質(zhì)問(wèn):
z-index 屬性があるにもかかわらず、視差効果をどのように実現(xiàn)しているのですか
彼の翻訳は基本的に 1 つの畫(huà)面の高さを削除し、次のページが表示されます。 。 。 これを行う方法を詳しく説明してください
認(rèn)證高級(jí)PHP講師
すべて絶対に配置され、右側(cè)のスクロール バーがシミュレートされます。同じ Z インデックスの高さでは、後続の要素が前の要素を自動(dòng)的にカバーします。
つまり、スクロールの狀態(tài)に応じて後続の翻訳を変更するだけです。1 枚のカードが別のカードを覆っていると理解できます。
簡(jiǎn)単に言うと、最初にスクロールするときに、2 番目の畫(huà)面の要素を上に移動(dòng)し、複數(shù)の畫(huà)面に達(dá)したら 2 番目の畫(huà)面を開(kāi)始します。
以下は背景畫(huà)像の拡大?縮小などの効果です。