KPR Verse Footer Effect の背後にある魔法の効果を解明する

KPR-verse Web サイトをスクロールしていたとき、下部にあるこのクールなエフェクトに気づきました。こういうものを見ると、いつも再現したくなります。私のプロセスはシンプルです。まずエフェクトを再現してみます。次に、複雑なデザインをわかりやすい手順に分解して、その方法を説明するブログを作成します。

最初はうまくできるかどうか疑問に思うことがよくありますが、よく考えた後、デザインを細かく分割する方法を見つけます。それらのピースをつなげることで効果を実現しています。話はこれくらいにして、自分で作る方法を見ていきましょう!

KPR 詩フッター効果の分析

サイトの最後に、背景に KPR バナーが表示されます。一見すると少し複雑そうに見えますが、それほど複雑ではありません。

まず、.container クラスの div を作成します。これがチュートリアルのルート要素になります。

次に、.container を .subcontainer-wrapper と footer の 2 つの部分に分割します。フッター要素には KPR バナーが含まれます。

ここで、.subcontainer-wrapper をさらに 2 つの部分に分割します。上部には Web サイトのすべてのコンテンツが含まれていますが、下部は背景のない空白のままであり、基本的には表示されませんが、ビューポートの幅と高さは維持されています。下半分はフッターを表示できるため重要です。

この時点まで、すべての要素は通常の HTML フロー、つまり上から下にあります。ここで、フッターを後ろに配置し、.subcontainer-wrapper を前に持ってくることで、この順序を壊す必要があります。これを行うには、.subcontainer-wrapper をその親の .container に対して相対的な位置: 絶対に設定します。これにより、通常の DOM フローから .subcontainer-wrapper が削除されます。

エフェクトを設定するために必要なのはこれだけです。次に、.subcontainer-wrapper の上部にコンテンツを入力しますが、下部 (非表示の div) は空のままにします。また、フッターにコンテンツを追加します。

コンテンツを追加すると、次のようになります。

上部では背景が非表示になり、下にスクロールすると、表示されているコンテンツが終了すると、非表示のセクションにフッターが表示されます。ほら！シンプルで簡単です。

_フォローしていただきありがとうございます!このガイドが役に立ち、理解しやすいものであると感じていただければ幸いです。好奇心を持ち、探索を続けてください!

オリジナル: KPR-verse

デモ サイト: Demo Link 。このデモでは、Google I/O サイト (https://io.google/2024/) を使用し、同様のコンセプトを紹介するためにそれを調整しました。

ソースコード: Github リンク_

以上がKPR Verse Footer Effect の背後にある魔法の効果を解明するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。