国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

JavaScript - ページ視差効果の実裝について質(zhì)問(wèn)する
PHP中文網(wǎng)
PHP中文網(wǎng) 2017-05-16 13:26:03
0
1
1145

ページ効果:

啓蟄

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

私は 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)しました:

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

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

質(zhì)問(wèn):

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

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

PHP中文網(wǎng)
PHP中文網(wǎng)

認(rèn)證高級(jí)PHP講師

全員に返信(1)
左手右手慢動(dòng)作

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

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

簡(jiǎn)単に言うと、最初にスクロールするときに、2 番目の畫(huà)面の要素を上に移動(dòng)し、複數(shù)の畫(huà)面に達(dá)したら 2 番目の畫(huà)面を開(kāi)始します。

以下は背景畫(huà)像の拡大?縮小などの効果です。

最新のダウンロード
詳細(xì)>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート