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

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

PHPz

リリース： 2023-10-24 09:02:25

オリジナル

1396 人が閲覧しました

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

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

背景は Web デザインの非常に重要な部分であり、視覚効果とユーザーエクスペリエンスを向上させることができます。ページの。従来の Web ページの背景は通常静的ですが、純粋な CSS テクノロジーを使用することで、スムーズなスクロールの背景効果を実現し、Web ページにより動的で鮮やかな視覚効果を追加できます。この記事では、CSS を使用してスムーズなスクロールの背景効果を実現する方法と、具体的なコード例を紹介します。

1. 準備

スムーズなスクロールの背景効果を実現する前に、基本的な HTML および CSS コードを準備する必要があります。まず、基本的な HTML ファイルを作成し、そのファイルに CSS ファイルを導入して、スムーズにスクロールする背景効果を実現するコードを CSS ファイルに記述できるようにする必要があります。基本的な HTML 構造の例を次に示します。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="background"></div>
  <div class="content">
    <!-- 网页内容 -->
  </div>
</body>
</html>

ログイン後にコピー

上の例では、背景レイヤー (div.background) とコンテンツレイヤー (div.content ##) を作成しました。 #)、背景レイヤーはスムーズなスクロールの背景効果を実現するために使用され、コンテンツレイヤーは他の Web コンテンツを配置するために使用されます。

2. スムーズなスクロールの背景効果を実現する

次に、スムーズなスクロールの背景効果を実現する CSS コードを記述してみましょう。コード例を次に示します。

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 占满整个可视区域 */
  background-image: url(background.jpg); /* 背景图片路径 */
  background-size: cover; /* 背景图片适应屏幕尺寸 */
  background-position: center; /* 背景图片居中显示 */
  z-index: -1; /* 确保背景层在内容层下方 */
  animation: scrollBackground 30s linear infinite; /* 启用滚动动画 */
}

@keyframes scrollBackground {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(50%);
  }
}

ログイン後にコピー

上記の CSS コードでは、最初に Web ページの

body 要素の overflow 属性を に設定します。 hidden 、スクロールバーを非表示にします。次に、position: fixed、width: 100%、height: 100vh を使用してビューポート内の背景レイヤーを固定し、背景レイヤーのサイズを次のように設定しました。ビュー領域と同様に、background-image 属性と background-size 属性を使用して、背景画像のパスとスケーリング方法、および background-position を指定します。 属性は、背景画像の位置を制御するために使用されます。最後に、animation 属性を使用してスクロールアニメーションを背景レイヤーに適用します。ここで、scrollBackground は定義したアニメーションの名前、30s は時間を表します。 1 回スクロールする場合、linear はアニメーションの遷移が線形であることを意味し、infinite はアニメーションが無限ループで再生されることを意味します。アニメーションの @keyframes ルールでは、transform 属性の translateY 関数を使用して、垂直方向のスクロール効果を実現します。

3. 効果を試してみる

上記のコードを完了したら、ブラウザで HTML ファイルを開いて、スムーズスクロールの背景効果を表示できます。ページをスクロールすると背景レイヤーが滑らかにスクロールして表示され、臨場感を味わえます。

概要

純粋な CSS テクノロジーを通じて、Web ページのスムーズなスクロールの背景効果を簡単に実現できます。わずか数行の CSS コードを使用するだけで、Web ページに動的で鮮やかな視覚効果を追加できます。この記事の内容があなたのお役に立ち、満足のいくスムーズなスクロールの背景効果を実現できることを願っています。

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