Web制作 CSS

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

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

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

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

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

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

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

参考記事
スマホ対応パララックス『simpleParallax.js』の使い方【サンプル付きで解説】
スマホ対応パララックス『simpleParallax.js』の使い方【サンプル付きで解説】

続きを見る

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

コーディングの時給アップにはこちら!


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

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

以上になります。

あわせて読む
スマホ対応パララックス『simpleParallax.js』の使い方【サンプル付きで解説】
スマホ対応パララックス『simpleParallax.js』の使い方【サンプル付きで解説】

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

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

-Web制作, CSS
-