ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS を使用して Web ページでスムーズなスクロールの背景グラデーション効果を実現する方法
純粋な CSS を使用して Web ページでスムーズなスクロールの背景グラデーション効果を実現する方法
- WBOYオリジナル
- 2023-10-25 11:19:431564ブラウズ
純粋な 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 サイトの他の関連記事を参照してください。