純粋な CSS を通じて Web ページでスムーズなスクロールの背景をくり抜く効果を実現する方法

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

インターネット技術の継続的な発展に伴い、Web ページのデザインはますます多様化しています。そして複雑です。見栄えの良い Web ページには、多くの場合、細部と革新への注意が必要です。中でも、滑らかにスクロールする背景のくり抜き効果は、近年人気が高まっているデザイン要素の1つです。この効果により、Web ページがより鮮やかで興味深いものになり、ユーザーの注意と興味を引くことができます。

この記事では、純粋な CSS を使用して Web ページのスムーズなスクロールの背景の中空効果を実現する方法を紹介し、具体的なコード例を示します。クールな Web ページの背景効果を作成する方法を一緒に学びましょう!

まず、基本的な HTML ドキュメント構造を作成する必要があります。 タグ内に、Web ページの背景として背景画像を含む <div> 要素を配置します。コードは次のとおりです。 <pre class='brush:html;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;平滑滚动背景镂空效果&lt;/title&gt; &lt;style&gt; body { margin: 0; padding: 0; overflow-x: hidden; } .background { position: relative; width: 100vw; height: 100vh; background-image: url('background.jpg'); background-size: cover; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;background&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p> 上記のコードでは、<code>.background クラスを定義します。このクラスのスタイルには、100 を表す幅と高さが 100vw および 100vh の背景画像が含まれています。背景画像が画面全体を完全にカバーできるように、それぞれ画面幅 % と画面高さ 100% を設定します。

次に、Web ページにスクロール効果を追加し、スクロール時に背景をくり抜く効果を実現する必要があります。ここでは、CSS の 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 仕様をサポートしていない一部のブラウザとの互換性を確保するためのものです。

最後に、JavaScript コードを使用して、スムーズなスクロール効果を実現します。コードは次のとおりです。

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 を変更することで実現されます。

上記のコード例を通じて、スムーズにスクロールする背景の中空効果を備えた Web ページを実装できます。独自のニーズに応じてコード内のスタイルとパラメーターを調整して、よりパーソナライズされた Web ページを作成することもできます。

要約すると、純粋な CSS を通じて Web ページのスムーズなスクロールの背景の中空効果を実現するには、background-attachment、background-clip、および他の属性を使用して背景効果を設定し、スクロール イベントをリッスンする JavaScript を組み合わせてスムーズなスクロールを実現します。この効果により、Web ページの視覚的な魅力が向上し、ユーザーのエクスペリエンスが向上します。この記事の紹介とコード例を通じて、Web ページのクールな背景効果を簡単に実現し、Web ページにユニークな魅力を追加できると思います。

上記の内容があなたのお役に立てば幸いです。そして、あなたが素晴らしい Web デザインを書くことを願っています。