どう作成するか：パラレルスクロール
CSSを使って「パラレル」スクロール効果を作成する方法を学びましょう。
パラレルスクロール
パラレルスクロールは、ウェブサイトデザインのトレンドの一つであり、背景コンテンツ（例えば画像）がスクロールする際の移動速度が前景コンテンツとは異なる場合があります。以下のリンクをクリックして、パラレルスクロールがあるかないかでウェブサイトの違いを確認してください。
注意：パラレルスクロールは、モバイルデバイス/スマートフォン上では常に効果的ではありません。しかし、メディアクエリを使用してモバイルデバイス上でこの効果をオフにできます（このページの最後の例を参照してください）。
パラレルスクロール効果の作成方法
コンテナ要素を使用し、特定の高さを持つ背景画像を追加します。次に、以下を使用して： background-attachment: fixed 実際のパラレルスクロール効果を作成します。他の背景属性は画像を中央に配置し、完璧に拡大するために使用されます：
ピクセル単位でのインスタンス
<style>
.parallax {
/* 使用する画像 */
background-image: url("img_parallax.jpg");
/* 特定の高さを設定する */
min-height: 500px;
/* パラレルスクロール効果を作成する */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- コンテナ要素 -->
<div class="parallax"></div>
上記の例では、画像の高さをピクセルで設定しています。100％など、画像がスクリーン全体に適応されるようにするためにパーセントを使用したい場合は、パラレルスクロールコンテナの高さを100％に設定する必要があります。注意：さらに、 height: 100% 以下に適用されます：<html> と <body>：
パーセント単位でのインスタンス
body, html {
height: 100%;
}
.parallax {
/* 使用する画像 */
background-image: url("img_parallax.jpg");
/* 全高 */
height: 100%;
/* パラレルスクロール効果を作成する */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
一部のモバイルデバイスでは、 background-attachment: fixed が発生します。しかし、メディアクエリを使用してモバイルデバイス上でパラレル効果をオフにできます：
インスタンス
/* 全てのタブレットやスマートフォンのパラレルスクロールをオフにします。必要に応じてピクセルを増減できます */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
上記のコードでは、スクリーン幅が1366ピクセル以下の場合、パラレルスクロール効果をオフにします。これは、ほとんどのタブレットやスマートフォンに適用されます。これは、以下を変更することで行われます。 .parallax 类的 background-attachment 属性从 fixed 到 scroll スクロールを使用して実現します。これにより、背景画像はページの残りの部分とともにスクロールし、ビューポートに固定されません。
