CSS Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

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

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

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

続きを見る

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

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

あわせて読みたい
Luxy.jsでパララックスと慣性スクロールを実装する方法【JavaScriptのプラグイン】
Luxy.jsでパララックスと慣性スクロールを実装する方法【JavaScriptのプラグイン】

続きを見る

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

あわせて読みたい
【Swiper】パララックススライダーを作る方法【サンプル付き】
【Swiper】パララックススライダーを作る方法【サンプル付き】

続きを見る

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

あわせて読みたい
【GSAP】パララックスをScrollTriggerを使って実装する方法【アニメーションのサンプルあり】
【GSAP】パララックスをScrollTriggerを使って実装する方法【アニメーションのサンプルあり】

続きを見る

 

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

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

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』の使い方【サンプル付きで解説】

続きを見る

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作
-