CSSのみでスマホ対応のパララックスを作る方法【サンプル付きで解説】

スマホ対応のパララックスってCSSだけで作れる？

パララックスが何かというのは説明するより後で見て貰った方が早いと思いますが、パララックスとは日本語で言えば視差効果の事になります。

これは『スクロールしても背景画像を固定されている』という状態になります。

ただし実装方法によってはPCでは上手く出来てもスマホでは反映されないという事があります。

そこで今回はスマホでもパララックスになるような実装方法を解説していきます。

背景画像ではなく、imgタグでパララックスを実装したい方は以下の記事を参照下さい。

他にもパララックスに関する記事は3記事あるので、用途によって使い分けてみて下さい。

Luxy.jsでパララックスと慣性スクロールを実装する方法はこちら。

Swiperでパララックススライダーを作る方法はこちら。

GSAPを使ってパララックスを作る方法はこちら。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

CSSのみでスマホ対応のパララックスを作る方法

背景を固定するCSSのプロパティにbackground-attachment: fixed;がありますが、これだとスマホでは固定されません。

こちらがそのデモになります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

スクロールすると背景画像は固定されていますが、それ以外はスクロールされています。

この視差効果のことをパララックスと言います。

しかしPCでは問題ありませんが、スマホだと固定されていないのが分かります。

そこで次はスマホ対応にするためにbackground-attachment: fixed;ではなくposition: fixed;を使います。

早速デモを見てみましょう。

See the Pen
CSSのみでパララックス by junpei (@junpei-sugiyama)
on CodePen.

こちらはスマホでもPCと同じように背景が固定されています。

HTMLは特に変わったところはありませんが、最初と同様に真ん中の要素を背景画像にしていきます。

<div class="container">スクロールして下さい</div>
<div class="parallax"></div>
<div class="container"></div>

CSSはこちらです。

.container {
  background-color: #1cb4d3;
  color: #f0f0f0;
  font-size: 26px;
  font-weight: 700;
  height: 400px;
  padding-top: 50px;
  text-align: center;
}

/* 背景画像の見えている高さ */
.parallax {
  height: 500px;
}

/* 背景画像 */
.parallax::before {
  background-image: url(画像パス);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}

固定する背景画像は擬似要素を使って表示します。

ポイントは擬似要素の方ではz-index: -1;にして他の要素の下に来るようにするところです。

これがないと画像が他の要素より上に来てしまいます。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！