CSS を使用した "parallax" スクロール効果の作成方法を学習します。
Parallax スクロールは、背景コンテンツ（すなわち、画像）がスクロールしている間、前景のコンテンツとは異なる速度で移動する、 web サイトのトレンドです。下のリンクをクリックして、視差スクロールの有無による違いを確認してください。
注: モバイルデバイス/スマートフォンでは、Parallax スクロールが常に機能するとは限りません。
コンテナ要素を使用して、指定の高さのコンテナに背景画像を追加します。 次に、実際の parallax 効果を作成するために、
background-attachment: fixed を使用します。 他の background プロパティは、
画像を完全に中央に配置し、大きさを調整するのに使います：
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
Try it Yourself »
上の例では、画像の高さを設定するためにピクセルを使用しました。例えば、100% のようにパーセントを使用して画像を画面全体に合わせたい場合は、
<html> と <body> の両方に height: 100% を適用しなければなりません：
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Try it Yourself »