CSSで「カーテンを上げる」効果を作る方法-CSSチュートリアル-php.cn

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

Jennifer Aniston

リリース： 2025-03-14 09:23:08

オリジナル

263 人が閲覧しました

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

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

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

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

HTML構造

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

<div class="curtain">
  <div class="invert">
    <h2>セクションタイトル</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デモへのリンク - 利用可能な場合は実際のリンクに置き換えてください]。