方法-視差スクロール
CSSを使用して「視差」スクロール効果を作成する方法を学びます。
視差
視差スクロールは、スクロール中に背景コンテンツ(つまり画像)が前景コンテンツとは異なる速度で移動するWebサイトのトレンドです。下のリンクをクリックして、視差スクロールがある場合とない場合のWebサイトの違いを確認してください。
注:視差スクロールは、モバイルデバイス/スマートフォンで常に機能するとは限りません。ただし、メディアクエリを使用して、モバイルデバイスへの影響をオフにすることができます(このページの最後の例を参照)。
視差スクロール効果を作成する方法
コンテナ要素を使用して、特定の高さのコンテナに背景画像を追加します。次に、を使用しbackground-attachment: fixed
て実際の視差効果を作成します。他の背景プロパティは、画像を完全に中央揃えおよび拡大縮小するために使用されます。
ピクセルの例
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-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>
上記の例では、ピクセルを使用して画像の高さを設定しました。画像を画面全体に合わせるためにパーセント(たとえば100%)を使用する場合は、視差コンテナの高さを100%に設定します。注:height: 100%
<html>と<body>の両方にも適用する必要があります。
パーセントの例
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;
}
一部のモバイルデバイスには、に問題がありbackground-attachment: fixed
ます。ただし、メディアクエリを使用して、モバイルデバイスの視差効果をオフにすることができます。
例
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}