コーディング Web制作 CSS

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

CSSのみでスマホ対応のパララックスを作る方法
スマホ対応のパララックスってCSSだけで作れる?

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

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

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

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

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

横方向にも動かせるスマホ対応パララックス simpleParallax.jsの使い方

効率よくコーディングしたい人はこちら

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;にして他の要素の下に来るようにするところです。

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

以上になります。

 


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-コーディング, Web制作, CSS
-