ホームページ >ウェブフロントエンド >CSSチュートリアル >純粋な CSS を使用して Web ページでスムーズなスクロールの背景効果を実現する方法
純粋な CSS を使用して Web ページでスムーズなスクロールの背景効果を実現する方法
- PHPzオリジナル
- 2023-10-24 09:02:251414ブラウズ
純粋な 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 コンテンツを配置するために使用されます。
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 関数を使用して、垂直方向のスクロール効果を実現します。
以上が純粋な CSS を使用して Web ページでスムーズなスクロールの背景効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。