CSSに関するヒントをいくつか紹介します！ページの見た目が悪いです。 _html/css_WEB-ITnose

いわゆる「視差」効果を備えた Web サイトは、かなり前から人気があります。 この効果について聞いたことがない方のために付け加えておきますが、主にさまざまな画像が含まれ、さまざまな方向に移動または重ねられます。これにより、訪問者の注意を引く素晴らしい光学効果が得られます。

Web デザインにおいて、Web サイトを実装する最も一般的な方法は、それを実現するために jQuery プラグインを追加することです。残念ながら、これを行うといくつかの欠点があります。これらのプラグインは、スクロール イベントのウィンドウ ターゲットにイベント ハンドラーをアタッチするため、JavaScript による大量のイベント処理が行われます (スクロール イベントの処理はパフォーマンスの問題を引き起こしやすいため、慎重に検討する必要があります)。上のレイヤーの位置、画像の背景が計算されてさまざまな要素に設定され、さらに多くの DOM 操作が発生します。

要約: JavaScript を使用したパララックスにより、Web サイトのスクロール パフォーマンスが急速に低下する可能性があります。

background-attachment: fixed

知っている人はほとんどいないでしょうが、この効果は CSS 経由でも実行できるということです。以下の例を見てください:

background-attachment を使用したペンの視差を参照: CodePen で Stefan Judis (@stefanjudis) によって修正されました。

この視差効果を得るには、背景画像がさまざまな要素に配置されます。これらの要素には、background-attachment:fixed の追加定義が必要です。背景画像の位置は、background-attachment を定義することで変更できます。

scrollプロパティの初期値は基本的に要素に対して画像の位置が固定されることを意味します。特別なことは何もなく、この動作は誰もが知っています。 Web サイトの背景画像や、ユーザーが上下にスクロールするときのその他のアクション。

興味深いのは、background-attachment:fixed の設定です。固定は、背景画像の位置が要素に応じて固定されず、ビューポートに固定されることを定義します。これは、どのようにスクロールしても、画像は視覚的に同じ位置にあることを意味します。これにより、優れた視覚的な視差効果が得られます。

実際の実装を簡単に確認してみましょう:

<!-- Four containers for setting the background images --><div class="parallax">  <div class="bg__foo">foo</div>  <div class="bg__bar">bar</div>  <div class="bg__baz">baz</div>  <div class="bg__bazz">bazz</div></div>// 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(    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg  );}.bg__bar {  background-image: url(    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg  );}.bg__baz {  background-image: url(    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg  );}.bg__bazz {  height: 100vh;  background-image: url(    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg  );}

几乎全球兼容性。它已经在IE9和Android 2.1支持。

まとめ

私は個人的に JavaScript ソリューションよりも CSS ソリューションを好みます。これは私の好みの完璧な例です。ロジックや追加の DOM 操作は必要ないため、ソリューション全体が優れたものになります。ただし、視差効果を扱う際に留意すべきことが 1 つあります。

この CSS ソリューションにもやるべきことがたくさんあります。背景添付: 修正すると、ブラウザーで行う必要のある描画が増加します。これにより、パフォーマンスに影響があり、FPS スクロールが低下する可能性があります (60fps ターゲットを覚えていますか?)。したがって、これらのことを行うときは、常に Chrome の FPS メーターに注目することをお勧めします。