純粋な CSS を使用して Web ページでスムーズなスクロールの背景グラデーション効果を実現する方法-CSSチュートリアル-php.cn

純粋な CSS を使用して Web ページでスムーズなスクロールの背景グラデーション効果を実現する方法

WBOY

リリース： 2023-10-25 11:19:43

オリジナル

1624 人が閲覧しました

純粋な CSS を使用して Web ページでスムーズなスクロールの背景グラデーション効果を実現する方法

純粋な CSS を使用して Web ページのスムーズなスクロールの背景グラデーション効果を実現する方法

1. はじめに

Web デザインでは、背景のグラデーション効果が使用されます。ウェブサイトに使用できます。美しさとダイナミックさを追加します。背景のグラデーションをスムーズにスクロールすると、Web ページがより魅力的になり、ユーザーに快適なブラウジング体験を与えることができます。この記事では、純粋な CSS を使用して Web ページのスムーズなスクロールの背景グラデーション効果を実現する方法を紹介し、具体的なコード例を示します。

2. 背景グラデーション効果の実現原理

スムーズスクロールの背景グラデーション効果を実現する前に、まず背景グラデーションの実現原理を理解します。 CSS では、背景のグラデーション効果は、linear-gradient() 関数を通じて実現できます。この関数は開始色と終了色を受け入れ、選択された方向と位置に基づいてグラデーションを塗りつぶします。

3. スムーズなスクロールの背景グラデーション効果を実現する手順

スクロール効果のあるコンテナを作成します。

<div class="container">
  <!-- 网页内容 -->
</div>

ログイン後にコピー

.container {
  height: 100vh;
  overflow-y: scroll;
}

ログイン後にコピー

コンテナは vh 単位を使用して高さをビューポートの高さに設定し、overflow-y 属性をスクロールに設定して垂直スクロール効果を実現します。

背景のグラデーション効果を追加します。

.container {
  background: linear-gradient(to bottom, #000000, #ffffff);
}

ログイン後にコピー

コンテナの CSS スタイルで、背景を開始色が黒 (#000000)、終了色が白 (#ffffff) の線形グラデーションに設定します。方向は下に設定され、上から下へのグラデーションを表します。

スクロールイベントリスナーを追加します。

JavaScript を介してスクロールイベントリスナーをコンテナに追加し、スクロールプロセス中に背景のグラデーションの位置を更新します。

const container = document.querySelector('.container');

container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  const scrollHeight = container.scrollHeight;
  const windowHeight = window.innerHeight;
  const progress = (scrollTop / (scrollHeight - windowHeight)) * 100;

  container.style.backgroundPositionY = `${progress}%`;
});

ログイン後にコピー

スクロールイベントのコールバック関数では、コンテナのスクロール位置scrollTop、コンテナの合計高さscrollHeight、ビューポートの高さwindowHeightを取得し、それに応じて背景のグラデーションの位置を更新します。スクロールの進行状況。割合の進行を計算することにより、背景のグラデーション位置のスムーズなスクロール効果が実現されます。最後に、backgroundPositionY プロパティを設定して、更新された変数を背景のグラデーションに適用します。

4. 完全なコード例

<!DOCTYPE html>
<html>
<head>
  <title>平滑滚动背景渐变效果</title>
  <style>
    .container {
      height: 100vh;
      overflow-y: scroll;
      background: linear-gradient(to bottom, #000000, #ffffff);
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 网页内容 -->
  </div>

  <script>
    const container = document.querySelector('.container');

    container.addEventListener('scroll', () => {
      const scrollTop = container.scrollTop;
      const scrollHeight = container.scrollHeight;
      const windowHeight = window.innerHeight;
      const progress = (scrollTop / (scrollHeight - windowHeight)) * 100;

      container.style.backgroundPositionY = `${progress}%`;
    });
  </script>
</body>
</html>

ログイン後にコピー

上記は、純粋な CSS を使用して Web ページのスムーズなスクロールの背景グラデーション効果を実現するための具体的な手順とコード例です。上記の方法により、Web サイトに動的な背景のグラデーション効果を追加して、ユーザーのブラウジングエクスペリエンスを向上させることができます。この記事があなたのお役に立てば幸いです。

以上が純粋な CSS を使用して Web ページでスムーズなスクロールの背景グラデーション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。