CSSで「カーテンを上げる」効果を作る方法

「カーテンを育てる」と呼ばれるこのCSS効果は、スクロールに視覚的に印象的な移行を作成します。背景は暗いものから明るいものにシフトしますが、上記の粘着性コンテンツは光から暗いものに移行します。

実際のアプリケーションでの外観は次のとおりです。

この効果を作成する方法を学ぶ準備はできましたか？簡単なHTMLおよびCSS実装に飛び込みましょう。

HTML構造

明確にするために、単純化されたバージョンを使用します。

<div class="curtain">
  <div class="invert">
    <h2 id="セクションタイトル">セクションタイトル</h2>
  </div>
</div>

これは、バックグラウンドエフェクトに.curtainコンテナ、粘着性コンテンツには.invert<h2></h2>見出しのために。

CSS変数

簡単にカスタマイズするために、CSS変数を定義します。

 ：根 {
  -MINH：98VH;
  -color1：小麦;
  -Color2：MidnightBlue;
}

これらの変数は、コンテナの高さ（ --minh ）、明るい色（ --color1 ）、および暗い色（ --color2 ）を制御します。

カーテン効果を作成します

.curtain要素は、バックグラウンドスプリットに線形勾配を使用し、追加の底部スペースにはmin-height使用します。

 .curtain {
  背景画像：線形勾配（底部、var（ -  color2）50％、var（ -  color1）50％）;
}

.curtain ::後{
  コンテンツ： "";
  表示：ブロック;
  min-height：var（ -  minh）;
}

::after 、余分なスペースの幻想を作成し、粘着性のコンテンツがコンテナ内に残るようにします。

粘着性コンテンツの実装

.invertクラスは粘着性のコンテンツをスタイルします：

 .invert {
  位置：粘着性;
  トップ：20px;
  ミックスブレンドモード：違い;
  ディスプレイ：Flex;
  Align-Items：Center;
  justify-content：center;
  min-height：var（ -  minh）;
}

H2 {
  色：var（ -  color1）;
}

position: stickyとtop粘着性の効果を生み出します。 mix-blend-mode: differenceコンテンツの色とバックグラウンドグラデーションをブレンドし、逆効果を生み出します。 FlexBoxはコンテンツを中心にします。

mix-blend-mode: difference反転効果を作成します。 mix-blend-mode値の視覚的な説明については、このCSS-Tricks Almanac Demo：[CSS-Tricksデモへのリンク - 利用可能な場合は実際のリンクに置き換えてください]。

デモと考慮事項

エフェクトを紹介するライブデモはこちらにあります：[デモへのリンク - 利用可能な場合は実際のリンクに置き換える]

重要なメモ：

• 粘着性コンテンツ内の画像は、色の反転に適していない場合があります。 SVGまたは透明なPNGの使用を検討してください。
• mix-blend-mode: differenceコンテナのtransformなどの特定のプロパティでは、違いはうまく機能しません。

この手法は、HTMLとCSSのみを使用して視覚的に魅力的な「カーテンを育てる」効果を作成するための、クリーンでブラウザ互換のソリューションを提供します。コメントで、この効果をどのように使用するか教えてください！

以上がCSSで「カーテンを上げる」効果を作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。