純粋な CSS を使用して Web ページのスムーズなスクロール背景の空洞効果を実現する方法
インターネット技術の継続的な発展に伴い、Web ページのデザインはますます多様化しています。そして複雑です。見栄えの良い Web ページには、多くの場合、細部と革新への注意が必要です。中でも、滑らかにスクロールする背景のくり抜き効果は、近年人気が高まっているデザイン要素の1つです。この効果により、Web ページがより鮮やかで興味深いものになり、ユーザーの注意と興味を引くことができます。
この記事では、純粋な CSS を使用して Web ページのスムーズなスクロールの背景の中空効果を実現する方法を紹介し、具体的なコード例を示します。クールな Web ページの背景効果を作成する方法を一緒に学びましょう!
まず、基本的な HTML ドキュメント構造を作成する必要があります。 上記のコードでは、 次に、Web ページにスクロール効果を追加し、スクロール時に背景をくり抜く効果を実現する必要があります。ここでは、CSS の 上記のコードでは、 次に、 最後に、JavaScript コードを使用して、スムーズなスクロール効果を実現します。コードは次のとおりです。 上記のコードでは、 上記のコード例を通じて、スムーズにスクロールする背景の中空効果を備えた Web ページを実装できます。独自のニーズに応じてコード内のスタイルとパラメーターを調整して、よりパーソナライズされた Web ページを作成することもできます。 要約すると、純粋な CSS を通じて Web ページのスムーズなスクロールの背景の中空効果を実現するには、 上記の内容があなたのお役に立てば幸いです。そして、あなたが素晴らしい Web デザインを書くことを願っています。 以上が純粋な CSS を通じて Web ページでスムーズなスクロールの背景をくり抜く効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。タグ内に、Web ページの背景として背景画像を含む 要素を配置します。コードは次のとおりです。
<!DOCTYPE html> <html> <head> <title>平滑滚动背景镂空效果</title> <style> body { margin: 0; padding: 0; overflow-x: hidden; } .background { position: relative; width: 100vw; height: 100vh; background-image: url('background.jpg'); background-size: cover; } </style> </head> <body> <div class="background"></div> </body> </html>ログイン後にコピー.backgroundクラスを定義します。このクラスのスタイルには、100 を表す幅と高さが 100vw および 100vh の背景画像が含まれています。背景画像が画面全体を完全にカバーできるように、それぞれ画面幅 % と画面高さ 100% を設定します。background-attachmentプロパティとbackground-clipプロパティを使用してこれを実現します。コードは次のとおりです。
.background { background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
ログイン後にコピー
background-attachmentがfixedに設定され、ビューポート内の背景画像が固定されないようにします。スクロールして移動します。background-repeatはno-repeatに設定されており、背景画像が繰り返しタイル表示されないことを意味します。background-positionはcenterに設定され、背景画像が中央に配置されます。-webkit-background-clipをtextに設定し、-webkit-text-fill-colorを設定します。を使用します。背景をくりぬく効果を実現するには、transparentを使用します。このうち、-webkitプレフィックスは、最新の CSS 仕様をサポートしていない一部のブラウザとの互換性を確保するためのものです。
document.addEventListener('DOMContentLoaded', () => { const background = document.querySelector('.background'); window.addEventListener('scroll', () => { const scrollTop = window.scrollY || window.pageYOffset; background.style.backgroundPositionY = `${scrollTop * 0.5}px`; }); });
ログイン後にコピー
scrollイベントをリッスンし、スクロール距離を取得し、スクロール距離に基づいて背景の位置を調整します。ここで、スクロールする背景の動きの効果は、backgroundPositionYを変更することで実現されます。background-attachment、background-clip、および他の属性を使用して背景効果を設定し、スクロール イベントをリッスンする JavaScript を組み合わせてスムーズなスクロールを実現します。この効果により、Web ページの視覚的な魅力が向上し、ユーザーのエクスペリエンスが向上します。この記事の紹介とコード例を通じて、Web ページのクールな背景効果を簡単に実現し、Web ページにユニークな魅力を追加できると思います。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
