ホームページ > 記事 > ウェブフロントエンド > CSS3 を使用してスクロール視差効果を実現

CSS3 を使用してスクロール視差効果を実現

不言オリジナル: 2018-06-25 16:23:081771ブラウズ

この記事では、CSS3 を使用してスクロール視差効果を実現するチュートリアルを主に紹介します。主に、background-attachment 属性を使用します。

「視差」効果は、現在、ますます人気になっています。インターネット。視差効果について聞いたことがない方のために説明しますが、実際には、画像を使用してさまざまなレイヤーを形成し、それらを異なる速度と方向で動かすことによって生成される効果です。これにより、視聴者の注意を効果的に引き付けることができる素晴らしい視覚効果が得られます。

Web デザインで視差効果を実現する最も一般的な方法は、jQuery プラグインを使用することです。しかし、このアプローチにはいくつかの欠点があります。これらのプラグインのほとんどは、ウィンドウオブジェクトのスクロールイベントにリスナーを配置します。これにより、JavaScript は多数のイベントトリガーを処理することになります (スクロールイベントの処理はブラウザのパフォーマンスの問題を引き起こしやすいため、使用する場合は十分に注意する必要があります)。さまざまなレイヤーの移動、背景の位置の計算、およびプロパティの設定画像のすべてが DOM 操作で多くの問題を引き起こします。

つまり、JavaScript を使用して視差効果を実現すると、パフォーマンスの問題が発生し、ページのスクロールに遅れが生じます。

Background-attachment 属性のレビュー
background-attachment -- 背景画像がスクロール軸に合わせて移動する方法を定義します
値: スクロール固定 | 継承
スクロール: 背景画像はページのスクロール軸に合わせて移動します
固定: ページのスクロール軸上の背景画像は移動しません
継承:継承
初期値:スクロール
継承:いいえ
適用対象:すべての要素
背景:background.attachment:attachment.
例

body    
{   
 background-image:url(&#39;list-orange.png&#39;);   
 background-attachment:fixed;   
 background-repeat:repeat-x;   
 background-position:center center;   
}

画面の背景画像オレンジ色の線です。スクロール軸が移動しても、オレンジ色の線の視覚的な位置は変化しません。
なぜこれを知っている人が少ないのかこの効果は実際に CSS を使用して実現できます。

視差効果を実現するには、複数の背景画像を異なる要素に配置する必要があります。これらの背景画像は、background-attachment:fixed として定義する必要があります。背景添付を設定することで、背景画像の効果や位置を変更することができます。 background-attachment のデフォルト値はスクロールです。これは、背景画像とコンテンツの位置が比較的静的であることを意味します。 Web ページを上下にスクロールすると、背景とコンテンツが一緒にスクロールすることを誰もが見たことがあります。

背景添付を固定に設定すると、状況が面白くなります。固定とは、背景画像がコンテンツとともにスクロールせず、ウィンドウとともに静止したままになることを意味します。つまり、スクロールバーをドラッグしても、背景画像は変化しません。これにより、美しい視差効果が生まれます。

実際の実装を見てみましょう:

<!-- Four containers for setting the background images -->   
<p class="parallax">   
  <p class="bg__foo">foo</p>   
  <p class="bg__bar">bar</p>   
  <p class="bg__baz">baz</p>   
  <p class="bg__bazz">bazz</p>   
</p>   
// setting base styles to image containers   
[class*="bg__"] {   
  height: 50vh;   
  text-indent: -9999px;   
  /* fix background */
  background-attachment: fixed;   
  /* center it */
  background-position: center center;   
  /* Scale it nicely to the element */
  background-size: cover;   
  /* just make it look a bit better  */
  &:nth-child(2n) {   
    box-shadow: inset 0 0 1em #111;   
  }   
}   
.bg__foo {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  );   
}   
.bg__bar {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax2.jpg   
  );   
}   
.bg__baz {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax3.jpg   
  );   
}   
.bg__bazz {   
  height: 100vh;   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  );   
}

このテクノロジーのブラウザーの互換性については、基本的に、最新のブラウザーと IE9 以降のブラウザーがサポートしています。

個人的には、JavaScript を使用するよりも CSS テクノロジーで実現される視差効果の方が好みです。 CSS を使用して実装され、ブラウザによってネイティブにサポートされているため、プログラミングロジックや DOM に対する追加の操作はなく、ソリューション全体が非常にシンプルで美しいものになります。

CSSで実装した視差効果でもブラウザに負担がかかります。

background-attachment: 修正すると、ブラウザーのレンダリングが増加し、ブラウザーのスクロールの効率にも影響します。したがって、開発中にさらにテストを行って、パフォーマンスに基づいて効果を判断する必要があります。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

CSS3 を使用してスクロール視差効果を実現

関連記事